'use client'

import {
  Button,
  HelperText,
  Label,
  Modal,
  ModalBody,
  ModalHeader,
  Spinner,
  Textarea,
} 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 { rejectWithdrawalSchema } from '../schemas'

type RejectWithdrawalFormValues = yup.InferType<typeof rejectWithdrawalSchema>

interface RejectWithdrawalModalProps {
  isOpen: boolean
  loading: boolean
  onConfirm: (data: RejectWithdrawalFormValues) => void
  onClose: () => void
}

export default function RejectWithdrawalModal({
  isOpen,
  loading,
  onConfirm,
  onClose,
}: RejectWithdrawalModalProps) {
  const {
    register,
    reset,
    clearErrors,
    handleSubmit,
    formState: { errors },
  } = useForm<RejectWithdrawalFormValues>({
    resolver: yupResolver(rejectWithdrawalSchema),
  })

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

  return (
    <Modal
      position="center"
      theme={modalTheme.modal}
      dismissible
      show={isOpen}
      onClose={handleCloseModal}
    >
      <ModalHeader>Reject 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="rejection_reason">
                Rejection Reason
              </Label>
            </div>
            <Textarea
              id="rejection_reason"
              theme={formTheme.textarea}
              rows={4}
              className="resize-none"
              placeholder="Enter the reason for rejection..."
              {...register('rejection_reason')}
            />
            <HelperText color="failure">
              {errors.rejection_reason?.message}
            </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>
  )
}