'use client'

import {
  Button,
  FileInput,
  HelperText,
  Label,
  Modal,
  ModalBody,
  ModalHeader,
  Spinner,
} from 'flowbite-react'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'

import modalTheme from '@/lib/themes/modal'
import formTheme from '@/lib/themes/form'
import buttonTheme from '@/lib/themes/button'
import { completeWithdrawalSchema } from '../schemas'

type CompleteWithdrawalFormValues = yup.InferType<
  typeof completeWithdrawalSchema
>

interface CompleteWithdrawalModalProps {
  isOpen: boolean
  loading: boolean
  onConfirm: (data: CompleteWithdrawalFormValues) => void
  onClose: () => void
}

export default function CompleteWithdrawalModal({
  isOpen,
  loading,
  onConfirm,
  onClose,
}: CompleteWithdrawalModalProps) {
  const {
    setValue,
    trigger,
    reset,
    clearErrors,
    handleSubmit,
    formState: { errors },
  } = useForm<CompleteWithdrawalFormValues>({
    resolver: yupResolver(completeWithdrawalSchema),
  })

  function handleCloseModal() {
    reset()
    clearErrors()
    onClose()
  }

  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
    const selectedFile = event.target.files?.[0]
    setValue('transfer_proof', selectedFile as File)
    trigger('transfer_proof')
  }

  return (
    <Modal
      position="center"
      theme={modalTheme.modal}
      dismissible
      show={isOpen}
      onClose={handleCloseModal}
    >
      <ModalHeader>Complete Withdrawal</ModalHeader>
      <ModalBody>
        <form
          className="flex flex-col items-start gap-4 mx-auto"
          onSubmit={handleSubmit(onConfirm)}
        >
          <div className="w-full">
            <div className="mb-2 block">
              <Label theme={formTheme.label} htmlFor="transfer_proof">
                Transfer Proof
              </Label>
            </div>
            <FileInput
              id="transfer_proof"
              name="transfer_proof"
              accept="application/pdf,image/png,image/jpeg"
              onChange={handleFileChange}
            />
            <HelperText color="failure">
              {errors.transfer_proof?.message}
            </HelperText>
            <HelperText>
              Upload transfer proof with a maximum size of 5MB.
            </HelperText>
          </div>

          <Button
            disabled={loading}
            className="px-2 min-w-32 ml-auto"
            color="default"
            type="submit"
            theme={buttonTheme.button}
          >
            {loading ? (
              <>
                <Spinner size="sm" className="mr-2" />
                <span>Processing</span>
              </>
            ) : (
              <span>Submit</span>
            )}
          </Button>
        </form>
      </ModalBody>
    </Modal>
  )
}