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

import { StudentCreateFormValues } from '@/src/interfaces/users/students'
import { useCreateStudentForm } from './useCreateStudentForm'
import AsyncSelectEnrollmentPromotion from '../../forms/AsyncSelectEnrollmentPromotion'
import AsyncSelectStudyProgram from '../../forms/AsyncSelectStudyProgram'
import AsyncMultiSelectStudyYears from '../../forms/AsyncMultiSelectStudyYears'
import AsyncSelectEnrollmentStatus from '../../forms/AsyncSelectEnrollmentStatus'
import SelectGender from '../../forms/SelectGender'

const initialValues: StudentCreateFormValues = {
  code: '',
  name: '',
  lastname: '',
  email: '',
  password: '',
  rpassword: '',
  dni: '',
  address: '',
  phone: '',
  dateOfBirth: '',
  gender: '',
  enrollmentStatusId: '',
  startedStudyYearId: '',
  studyProgramId: '',
  studyYearIds: [],
  isActive: true,
}

export default function CreateStudentForm() {
  const {
    values,
    errors,
    setValues,
    handleChange,
    handleSubmit,
    handleSelectEnrollmentPromotion,
    handleSelectStudyProgram,
    handleSelectStudyYears,
    handleSelectEnrollmentStatus,
    handleSelectGender,
  } = useCreateStudentForm(initialValues)

  return (
    <form className="w-full p-4 space-y-4" onSubmit={handleSubmit} noValidate>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="mb-4">
          <Label htmlFor="name" value="Nombre *" />
          <TextInput
            id="name"
            type="text"
            name="name"
            value={values.name}
            onChange={handleChange}
          />
          {errors.name && <p className="text-xs text-error">{errors.name}</p>}
        </div>

        <div className="mb-4">
          <Label htmlFor="lastname" value="Apellidos *" />
          <TextInput
            id="lastname"
            type="text"
            name="lastname"
            value={values.lastname}
            onChange={handleChange}
          />
          {errors.lastname && (
            <p className="text-xs text-error">{errors.lastname}</p>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="mb-4">
          <Label htmlFor="code" value="Código *" />
          <TextInput
            id="code"
            type="text"
            name="code"
            value={values.code}
            onChange={handleChange}
          />
          {errors.code && <p className="text-xs text-error">{errors.code}</p>}
        </div>

        <div className="mb-4">
          <Label htmlFor="email" value="Correo Electrónico *" />
          <TextInput
            id="email"
            type="email"
            name="email"
            value={values.email}
            onChange={handleChange}
          />
          {errors.email && <p className="text-xs text-error">{errors.email}</p>}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="mb-4">
          <Label htmlFor="password" value="Contraseña *" />
          <TextInput
            id="password"
            type="password"
            name="password"
            value={values.password}
            onChange={handleChange}
          />
          {errors.password && (
            <p className="text-xs text-error">{errors.password}</p>
          )}
        </div>

        <div className="mb-4">
          <Label htmlFor="rpassword" value="Repetir Contraseña *" />
          <TextInput
            id="rpassword"
            type="password"
            name="rpassword"
            value={values.rpassword}
            onChange={handleChange}
          />
          {errors.rpassword && (
            <p className="text-xs text-error">{errors.rpassword}</p>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="mb-4">
          <Label htmlFor="dni" value="DNI *" />
          <TextInput
            id="dni"
            type="text"
            name="dni"
            value={values.dni}
            onChange={event => {
              if (
                /^\d*$/.test(event.target.value) &&
                event.target.value.length <= 8
              ) {
                handleChange(event)
              }
            }}
            onKeyPress={event => {
              if (!/^\d$/.test(event.key)) {
                event.preventDefault()
              }
            }}
            maxLength={8}
            max={8}
            inputMode="numeric"
            className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
          />
          {errors.dni && <p className="text-xs text-error">{errors.dni}</p>}
        </div>

        <div className="mb-4">
          <Label htmlFor="phone" value="Teléfono *" />
          <TextInput
            id="phone"
            type="text"
            name="phone"
            value={values.phone}
            onChange={event => {
              if (
                /^\d*$/.test(event.target.value) &&
                event.target.value.length <= 9
              ) {
                handleChange(event)
              }
            }}
            onKeyPress={event => {
              if (!/^\d$/.test(event.key)) {
                event.preventDefault()
              }
            }}
            maxLength={9}
            max={9}
            inputMode="numeric"
            className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
          />
          {errors.phone && <p className="text-xs text-error">{errors.phone}</p>}
        </div>

        <div className="mb-4">
          <Label htmlFor="address" value="Dirección" />
          <TextInput
            id="address"
            type="text"
            name="address"
            value={values.address}
            onChange={handleChange}
          />
          {errors.address && (
            <p className="text-xs text-error">{errors.address}</p>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="mb-4">
          <Label htmlFor="dateOfBirth" value="Fecha de Cumpleaños" />
          <TextInput
            id="dateOfBirth"
            type="date"
            name="dateOfBirth"
            value={values.dateOfBirth || ''}
            onChange={handleChange}
          />
          {errors.dateOfBirth && (
            <p className="text-xs text-error">{errors.dateOfBirth}</p>
          )}
        </div>

        <div className="mb-4">
          <Label value="Género *" />

          <SelectGender onChange={handleSelectGender} value={values.gender} />

          {errors.gender && (
            <p className="text-xs text-error">{errors.gender}</p>
          )}
        </div>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="mb-4">
          <Label htmlFor="studyProgram" value="Programa de estudios *" />
          <AsyncSelectStudyProgram onChange={handleSelectStudyProgram} />{' '}
          {errors.studyProgramId && (
            <p className="text-xs text-error">{errors.studyProgramId}</p>
          )}
        </div>

        <div className="mb-4">
          <Label value="Promoción de Ingreso *" />
          <AsyncSelectEnrollmentPromotion
            onChange={handleSelectEnrollmentPromotion}
          />
          {errors.startedStudyYearId && (
            <p className="text-xs text-error">{errors.startedStudyYearId}</p>
          )}
        </div>

        <div className="mb-4">
          <Label value="Situación Académica *" />

          <AsyncSelectEnrollmentStatus
            onChange={handleSelectEnrollmentStatus}
          />

          {errors.enrollmentStatusId && (
            <p className="text-xs text-error">{errors.enrollmentStatusId}</p>
          )}
        </div>

        <div className="mb-4">
          <Label value="Ciclos Académicos *:" />

          <AsyncMultiSelectStudyYears onChange={handleSelectStudyYears} />
          {errors.studyYearIds && (
            <p className="text-xs text-error">{errors.studyYearIds}</p>
          )}
        </div>
      </div>

      <div className="mb-4">
        <Label htmlFor="isActive" value="Estado" />
        <ToggleSwitch
          id="isActive"
          checked={values.isActive}
          label={values.isActive ? 'Activo' : 'Inactivo'}
          onChange={() => setValues({ ...values, isActive: !values.isActive })}
        />
        {errors.isActive && (
          <p className="text-xs text-error">{errors.isActive}</p>
        )}
      </div>

      <Button type="submit" className="w-full md:w-auto">
        Crear Estudiante
      </Button>
    </form>
  )
}