import { useEffect, useState } from 'react'
import { HelperText, Label, Select } from 'flowbite-react'
import { Controller, useFormContext } from 'react-hook-form'

import formTheme from '@/lib/themes/form'
import { getBanks } from '@/lib/services/bank-services'
import { TravelPartnerFormValues } from '@/lib/types/partner'
import { Bank } from '../../banks/types'

export default function BankSelect() {
  const {
    control,
    formState: { errors },
  } = useFormContext<TravelPartnerFormValues>()

  const [banks, setBanks] = useState<Bank[]>([])

  useEffect(() => {
    getBanks({ all: true }).then((data) => {
      setBanks(data as Bank[])
    })
  }, [])

  return (
    <div>
      <div className="mb-2 block">
        <Label theme={formTheme.label} htmlFor="bank_id">
          Bank Name <span className="text-red-500">*</span>
        </Label>
      </div>
      <Controller
        name="bank_account.bank_id"
        control={control}
        render={({ field }) => (
          <Select
            {...field}
            theme={formTheme.select}
            id="bank_id"
            disabled={banks.length === 0}
          >
            <option value="">-- Select Bank --</option>
            {banks.map((bank) => (
              <option key={bank.id} value={bank.id}>
                {bank.bank_name}
              </option>
            ))}
          </Select>
        )}
      />
      <HelperText color="failure">
        {errors.bank_account?.bank_id?.message}
      </HelperText>
    </div>
  )
}