import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility"
import "./styles/styles.css"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye , faEyeSlash} from "@fortawesome/free-solid-svg-icons";
import { useLogin } from "../../hooks/useLogin";

export const LoginPage = () => {
  const {
    values,
    handleClickShowPassword,
    handleMouseDownPassword,
  } = usePasswoordVisibility();

  const {
    register, 
    handleSubmit, 
    errors, 
    onSubmit
  } = useLogin();

  return (
    <div className="login-page-root">
      <div className="login-form-container">
        <div className="title">
          Inicia sesión
        </div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="login-form-field">
            <input
              type="email" 
              {...register('email')}
              required placeholder=""/>
            <label>Email</label>
          </div>
          <div className="login-form-field">
            <input 
              type={
                  values.showPassword
                  ? "text"
                  : "password"
              }
              {...register('password')}
              required 
              
            />
            <label>Contraseña</label>
            <FontAwesomeIcon className="pass-visibility-button"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
              icon={values.showPassword ? faEye : faEyeSlash}
            />
          </div>
          <div className="login-form-button">
            <input type="submit" value="Entrar"/>
          </div>
        </form>
      </div>
    </div>
  )     
}