import { Button, Label, Modal, TextInput } from 'flowbite-react'
import { FaEye, FaEyeSlash } from 'react-icons/fa6'

import { StudentChangePasswordFormValues } from '@/src/interfaces/users/students'
import { useModalChangePasswordStudent } from './useModalChangePasswordStudent'

const initialValues: StudentChangePasswordFormValues = {
  password: '',
  rpassword: '',
}

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

export default function ModalChangePasswordStudent({ show, onClose }: Props) {
  const {
    values,
    fieldErrors,
    handleChange,
    handleSubmit,
    showPassword,
    handleShowPassword,
  } = useModalChangePasswordStudent({
    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="font-bold text-lg">Cambiar Contraseña</h3>

          <form onSubmit={handleSubmit} noValidate className="space-y-4">
            <div>
              <div className="mb-2 block">
                <Label htmlFor="password" value="Contraseña" />
              </div>
              <TextInput
                id="password"
                name="password"
                value={values.password}
                onChange={handleChange}
                type={showPassword ? 'text' : 'password'}
                rightIcon={() =>
                  !showPassword ? (
                    <FaEye
                      onClick={handleShowPassword}
                      className="cursor-pointer"
                      fontSize={14}
                      width={16}
                    />
                  ) : (
                    <FaEyeSlash
                      onClick={handleShowPassword}
                      className="cursor-pointer"
                      fontSize={14}
                      width={16}
                    />
                  )
                }
              />
              {fieldErrors.password && (
                <p className="text-sm text-error">{fieldErrors.password}</p>
              )}
            </div>

            <div>
              <div className="mb-2 block">
                <Label htmlFor="rpassword" value="Repite Contraseña" />
              </div>
              <TextInput
                id="rpassword"
                name="rpassword"
                type="password"
                value={values.rpassword}
                onChange={handleChange}
              />
              {fieldErrors.rpassword && (
                <p className="text-sm text-error">{fieldErrors.rpassword}</p>
              )}
            </div>

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