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

import { PaymentConceptEditFormValues } from '@/src/interfaces/users/paymentConcepts'
import { useEditPaymentConceptForm } from '../forms/useEditPaymentConceptForm'
import AsyncSelectStudyYear from '../forms/AsyncSelectStudyYear'

const initialValues: PaymentConceptEditFormValues = {
  name: '',
  amount: '0.00',
  studyYearId: '',
}

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

export default function ModalEditPaymentConcept({ show, onClose }: Props) {
  const {
    values,
    handleChange,
    handleSubmit,
    setValues,
    fieldErrors,
    handleSelectStudyYearOption,
  } = useEditPaymentConceptForm({ initialValues, show, onClose })

  return (
    <Modal
      show={show}
      onClose={onClose}
      size="md"
      position="center"
      popup
      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">
            Modificar concepto de pago
          </h3>
          <form onSubmit={handleSubmit} noValidate className="space-y-6">
            <div>
              <div className="mb-2 block">
                <Label htmlFor="name" value="Nombre:" />
              </div>
              <TextInput
                id="name"
                name="name"
                value={values.name}
                onChange={handleChange}
              />

              {fieldErrors.name && (
                <p className="text-sm text-error">{fieldErrors.name}</p>
              )}
            </div>

            <div>
              <div className="mb-2 block">
                <Label value="Ciclo académico:" />
              </div>

              <AsyncSelectStudyYear onChange={handleSelectStudyYearOption} />

              {fieldErrors.studyYearId && (
                <p className="text-sm text-error">{fieldErrors.studyYearId}</p>
              )}
            </div>

            <div>
              <div className="mb-2 block">
                <Label htmlFor="amount" value="Monto (en soles):" />
              </div>
              <TextInput
                id="amount"
                name="amount"
                type="number"
                min={0}
                step={0.1}
                value={values.amount}
                onChange={event => {
                  const inputValue = event.target.value.replace(/\D/g, '') // Remueve caracteres no numéricos

                  if (inputValue === '') {
                    setValues({ ...values, amount: '0.00' })
                  } else {
                    // Asegura que el número tenga al menos dos decimales
                    let numericValue = parseFloat(inputValue).toString()
                    if (numericValue.length === 1) {
                      numericValue = '0.0' + numericValue
                    } else if (numericValue.length === 2) {
                      numericValue = '0.' + numericValue
                    } else {
                      numericValue =
                        numericValue.slice(0, -2) + '.' + numericValue.slice(-2)
                    }

                    event.target.value = numericValue.toString()

                    handleChange(event)
                  }
                }}
                onKeyPress={event => {
                  if (!/^\d$/.test(event.key)) {
                    event.preventDefault()
                  }
                }}
                inputMode="numeric"
              />

              {fieldErrors.amount && (
                <p className="text-sm text-error">{fieldErrors.amount}</p>
              )}
            </div>

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