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

import { EmailPasswordChangeFormValues } from '@/src/interfaces/auth'
import { useEmailPasswordChangeForm } from './useEmailPasswordChangeForm'
import ErrorLabel from '@/src/components/ui/ErrorLabel'

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

export default function EmailPasswordChangeForm() {
  const {
    values,
    fieldErrors,
    isLoading,
    isSuccess,
    error,
    showPassword,
    showRpassword,
    handleChange,
    handleSubmit,
    handleShowPassword,
    handleShowRpassword,
  } = useEmailPasswordChangeForm(initialValues)

  return (
    <div>
      <form className="space-y-4" onSubmit={handleSubmit} noValidate>
        <div>
          <Label htmlFor="password" value="Contraseña:" />
          <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 && <ErrorLabel value={fieldErrors.password} />}
        </div>
        <div>
          <Label htmlFor="rpassword" value="Confirmar Contraseña:" />
          <TextInput
            id="rpassword"
            name="rpassword"
            value={values.rpassword}
            onChange={handleChange}
            type={showRpassword ? 'text' : 'password'}
            rightIcon={() =>
              !showRpassword ? (
                <FaEye
                  onClick={handleShowRpassword}
                  className="cursor-pointer"
                  fontSize={14}
                  width={16}
                />
              ) : (
                <FaEyeSlash
                  onClick={handleShowPassword}
                  className="cursor-pointer"
                  fontSize={14}
                  width={16}
                />
              )
            }
          />

          {fieldErrors.rpassword && (
            <ErrorLabel value={fieldErrors.rpassword} />
          )}
        </div>
        <div>
          {!isSuccess && (
            <Button
              type="submit"
              color="primary"
              className="w-full flex justify-center"
              disabled={isLoading}>
              {isLoading ? 'Cargando...' : 'Cambiar Contraseña'}
            </Button>
          )}
        </div>
      </form>

      {error && <ErrorLabel value={error} className="text-center" />}
    </div>
  )
}