import {UseFormReturn} from 'react-hook-form';
import {Form} from '../../ui/forms/form';
import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
import {FormSelect} from '../../ui/forms/select/select';
import {Trans} from '../../i18n/trans';
import {Item} from '../../ui/forms/listbox/item';
import {Subscription} from '../../billing/subscription';
import {FormDatePicker} from '../../ui/forms/input-field/date/date-picker/date-picker';
import {useProducts} from '../../billing/pricing-table/use-products';
import {FormattedPrice} from '../../i18n/formatted-price';
import {FormNormalizedModelField} from '../../ui/forms/normalized-model-field';
interface CrupdateSubscriptionForm {
onSubmit: (values: Partial<Subscription>) => void;
formId: string;
form: UseFormReturn<Partial<Subscription>>;
}
export function CrupdateSubscriptionForm({
form,
onSubmit,
formId,
}: CrupdateSubscriptionForm) {
const query = useProducts();
// @ts-ignore
const watchedProductId = form.watch('product_id');
const selectedProduct = query.data?.products.find(
p => p.id === watchedProductId,
);
return (
<Form id={formId} form={form} onSubmit={onSubmit}>
<FormNormalizedModelField
name="user_id"
className="mb-20"
endpoint="normalized-models/user"
label={<Trans message="User" />}
/>
<FormSelect
name="product_id"
selectionMode="single"
className="mb-20"
label={<Trans message="Plan" />}
>
{query.data?.products
.filter(p => !p.free)
.map(product => (
<Item key={product.id} value={product.id}>
<Trans message={product.name} />
</Item>
))}
</FormSelect>
{!selectedProduct?.free && (
<FormSelect
name="price_id"
selectionMode="single"
className="mb-20"
label={<Trans message="Price" />}
>
{selectedProduct?.prices.map(price => (
<Item key={price.id} value={price.id}>
<FormattedPrice price={price} />
</Item>
))}
</FormSelect>
)}
<FormTextField
inputElementType="textarea"
rows={3}
name="description"
label={<Trans message="Description" />}
className="mb-20"
/>
<FormDatePicker
className="mb-20"
name="renews_at"
granularity="day"
label={<Trans message="Renews at" />}
description={
<Trans message="This will only change local records. User will continue to be billed on their original cycle on the payment gateway." />
}
/>
<FormDatePicker
className="mb-20"
name="ends_at"
granularity="day"
label={<Trans message="Ends at" />}
description={
<Trans message="This will only change local records. User will continue to be billed on their original cycle on the payment gateway." />
}
/>
</Form>
);
}