import { Button, Label, Modal } from 'flowbite-react'

import AsyncSelectStudent from '../forms/AsyncSelectStudent'
import { useModalDownloadPaymentReportByStudent } from './useModalDownloadPaymentReportByStudent'

interface Props {
  show: boolean
  onClose: () => void
}

export default function ModalDownloadPaymentReportByStudent({
  show,
  onClose,
}: Props) {
  const { handleSelectStudent, handleSubmit } =
    useModalDownloadPaymentReportByStudent(
      {
        student: '',
      },
      onClose,
    )

  return (
    <Modal
      show={show}
      onClose={onClose}
      size="md"
      position="center"
      popup
      dismissible
      className="flex items-center justify-center min-h-screen">
      <Modal.Header />

      <Modal.Body>
        <div className="space-y-6">
          <h3 className="text-xl font-medium text-gray-900 dark:text-white">
            Descargar reporte de pagos
          </h3>
          <form onSubmit={handleSubmit} noValidate className="space-y-6">
            <div>
              <div className="mb-2 block">
                <Label htmlFor="name" value="Estudiante:" />

                <AsyncSelectStudent onChange={handleSelectStudent} />
              </div>
            </div>

            <div className="w-full flex justify-center">
              <Button type="submit" color="primary">
                Descargar
              </Button>
            </div>
          </form>
        </div>
      </Modal.Body>
    </Modal>
  )
}