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

import { PaymentCreateFormValues } from '@/src/interfaces/users/payments'
import PaymentDetails from '../../components/PaymentDetails'
import { useCreatePaymentForm } from './useCreatePaymentForm'
import ErrorLabel from '@/src/components/ui/ErrorLabel'
import AsyncSelectPaymentConcept from '../../forms/AsyncSelectPaymentConcept'
import AsyncSelectStudent from '../../forms/AsyncSelectStudent'
import AsyncSelectPaymentStatus from '../../forms/AsyncSelectPaymentStatus'

const initialValues: PaymentCreateFormValues = {
  code: '',
  date: '',
  statusId: '',
  studentId: '',
  conceptId: '',
}

export default function CreatePaymentForm() {
  const {
    values,
    details,
    fieldErrors,
    handleChange,
    handleSubmit,
    handleSelectPaymentConcept,
    handleSelectStudent,
    handleSelectPaymentStatus,
  } = useCreatePaymentForm(initialValues)

  return (
    <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
      <div className="w-full md:w-3/5">
        <form onSubmit={handleSubmit} noValidate>
          <div className="mb-4">
            <Label htmlFor="code" value="Código de pago:" />
            <TextInput
              id="code"
              type="text"
              name="code"
              value={values.code}
              onChange={handleChange}
            />
            {fieldErrors.code && <ErrorLabel value={fieldErrors.code} />}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="mb-4">
              <Label htmlFor="date" value="Fecha de pago:" />
              <TextInput
                id="date"
                type="datetime-local"
                name="date"
                value={values.date}
                onChange={handleChange}
              />
              {fieldErrors.date && (
                <p className="text-xs text-error">{fieldErrors.date}</p>
              )}
            </div>

            <div className="mb-4">
              <Label value="Estado:" />

              <AsyncSelectPaymentStatus onChange={handleSelectPaymentStatus} />

              {fieldErrors.statusId && (
                <ErrorLabel value={fieldErrors.statusId} />
              )}
            </div>
          </div>

          <div className="mb-4">
            <Label value="Estudiante:" />

            <AsyncSelectStudent onChange={handleSelectStudent} />

            {fieldErrors.studentId && (
              <ErrorLabel value={fieldErrors.studentId} />
            )}
          </div>

          <div className="mb-4">
            <Label value="Concepto de Pago:" />
            <AsyncSelectPaymentConcept onChange={handleSelectPaymentConcept} />
            {fieldErrors.conceptId && (
              <ErrorLabel value={fieldErrors.conceptId} />
            )}
          </div>

          <Button type="submit" color="primary" className="w-full md:w-auto">
            Registrar Pago
          </Button>
        </form>
      </div>
      <div className="w-full md:w-2/5">
        <PaymentDetails {...values} {...details} />
      </div>
    </div>
  )
}