'use client'

import {useFormContext} from 'react-hook-form'
import {FormField} from '@/components/ui/form'
import {RadioGroup} from '@/components/ui/radio-group'
import FormOption from '../option'
import {PurchaseFormValues} from './form-values'

export function BillingMethodField(props: {
  expireList: string[]
  timeDailyLimit: number
}) {
  const {setValue} = useFormContext<PurchaseFormValues>()

  return (
    <FormField<PurchaseFormValues, 'type'>
      className="flex flex-col gap-4"
      name="type"
      label="计费方式"
    >
      {({id, field}) => (
        <RadioGroup
          id={id}
          value={field.value}
          onValueChange={(value) => {
            field.onChange(value)

            if (value === '2') {
              setValue('expire', '0')
              return
            }

            if (props.expireList.length > 0) {
              setValue('expire', props.expireList[0])
            }

            setValue('daily_limit', props.timeDailyLimit)
          }}
          className="flex gap-4 max-md:flex-col"
        >
          <FormOption
            id={`${id}-2`}
            value="2"
            label="包量套餐"
            description="适用于短期或不定期高提取业务场景"
            compare={field.value}
          />

          <FormOption
            id={`${id}-1`}
            value="1"
            label="包时套餐"
            description="适用于每日提取量稳定的业务场景"
            compare={field.value}
          />
        </RadioGroup>
      )}
    </FormField>
  )
}