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

import { UserModifyFormValues } from '@/src/interfaces/users/users'
import SelectRole from '../../../forms/SelectRole'
import { useModifyUserForm } from './useModifyUserForm'

const initialValues: UserModifyFormValues = {
  name: '',
  lastname: '',
  email: '',
  dni: '',
  phone: '',
  roleId: '',
}

export default function ModifyUserForm() {
  const { values, errors, handleChange, handleSubmit, handleSelectRole } =
    useModifyUserForm(initialValues)

  return (
    <form className="w-full p-4 space-y-4" onSubmit={handleSubmit} noValidate>
      <div className="grid grid-cols-1 md:grid-cols-3 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 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-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 value="Rol de usuario: *" />

          <SelectRole onChange={handleSelectRole} value={values.roleId} />

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

      <Button type="submit" color="primary" className="w-full md:w-auto">
        Modificar Usuario
      </Button>
    </form>
  )
}