import {
  Button,
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader,
} from 'flowbite-react'
import { FormProvider, UseFormReturn } from 'react-hook-form'

import modalTheme from '@/lib/themes/modal'
import buttonTheme from '@/lib/themes/button'
import { BankFormValues } from '../types'
import BankForm from './BankForm'

interface ModalFormProps {
  isOpen: boolean
  mode: 'create' | 'edit'
  isSubmitting?: boolean
  form: UseFormReturn<BankFormValues>
  originalLogoUrl?: string | null
  onClose: () => void
  onSubmit: (data: BankFormValues) => void
}

export default function ModalForm({
  isOpen,
  mode,
  isSubmitting = false,
  form,
  originalLogoUrl,
  onClose,
  onSubmit,
}: ModalFormProps) {
  const title = mode === 'create' ? 'Create New Bank' : 'Edit Bank'
  const submitButtonText = mode === 'create' ? 'Create Bank' : 'Update Bank'

  return (
    <Modal
      position="center"
      theme={modalTheme.modal}
      dismissible
      show={isOpen}
      size="4xl"
      onClose={onClose}
    >
      <ModalHeader>{title}</ModalHeader>

      <FormProvider {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <ModalBody>
            <BankForm originalLogoUrl={originalLogoUrl} />
          </ModalBody>

          <ModalFooter>
            <div className="flex justify-end gap-3 w-full">
              <Button
                color="alternative"
                theme={buttonTheme.button}
                onClick={onClose}
                disabled={isSubmitting}
              >
                Cancel
              </Button>
              <Button
                type="submit"
                color="default"
                theme={buttonTheme.button}
                disabled={isSubmitting}
              >
                {isSubmitting
                  ? mode === 'create'
                    ? 'Creating…'
                    : 'Updating…'
                  : submitButtonText}
              </Button>
            </div>
          </ModalFooter>
        </form>
      </FormProvider>
    </Modal>
  )
}