import { usePasswoordVisibility } from "../../domain/useCase/usePasswordVisibility";
import "./styles/styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faCircleExclamation,
  faEye,
  faEyeSlash,
  faWindowClose,
} from "@fortawesome/free-solid-svg-icons";
import { useLogin } from "../../domain/useCase/useLogin";
import { useState } from "react";
import { ResetPasswordWindow } from "../components/reset_password_window/reset_password_window";

export const LoginPage = () => {
  // Custom hook to manage password visibility
  const { values, handleClickShowPassword, handleMouseDownPassword } =
    usePasswoordVisibility();

  // State to manage the visibility of the reset password window
  const [isWindowActive, setIsWindowActive] = useState(false);

  // State to manage loading spinner visibility
  const [isLoading, setIsLoading] = useState(false);

  // Custom hook to manage login form submission and validation
  const { register, handleSubmit, errors, onSubmit, clearErrors } =
    useLogin(setIsLoading);

  // Function to close the reset password window
  const handleClickToClose = () => {
    setIsWindowActive(false);
  };

  return (
    <div className="login-page-root">
      {/* Display server error window if there is a 500 error */}
      {errors.root?.serverError.type === "500" && (
        <div className="server-error-window">
          <div className="window-error-header">
            <div className="window-title">Error</div>
            <FontAwesomeIcon
              icon={faWindowClose}
              className="window-close-button"
              onClick={() => {
                clearErrors("root.serverError");
              }}
            />
          </div>
          <div className="window-error-body">
            <FontAwesomeIcon
              icon={faCircleExclamation}
              className="circle-exclamation-icon"
            />
            {errors.root?.serverError.message}
          </div>
        </div>
      )}

      {/* Display reset password window if isWindowActive is true */}
      {isWindowActive && (
        <ResetPasswordWindow handleClickToClose={handleClickToClose} />
      )}

      {/* Display loading spinner if isLoading is true */}
      {isLoading && <div className="loading_spinner" />}

      <div className="login-form-container">
        <div className="title">Inicia sesión</div>

        {/* Login form */}
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="login-form-field">
            <input type="text" {...register("email")} placeholder="" />
            <label>Email</label>
          </div>
          <p className="login_error">{errors.email?.message}</p>

          <div className="login-form-field">
            <input
              type={values.showPassword ? "text" : "password"}
              {...register("password")}
              autoComplete="off"
              readOnly={isLoading || isWindowActive}
            />
            <label>Contraseña</label>
            <FontAwesomeIcon
              className="pass-visibility-button"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
              icon={values.showPassword ? faEye : faEyeSlash}
            />
          </div>
          <p className="login_error">{errors.password?.message}</p>
          <p className="login_error">
            {errors.root?.serverError.type === "401" &&
              errors.root?.serverError.message}
          </p>

          {/* Link to open reset password window */}
          <p
            className="reset_password_btn"
            onClick={() => setIsWindowActive(true)}
          >
            ¿Contraseña olvidada?
          </p>

          <div className="login-form-button">
            <input
              type="submit"
              value="Entrar"
              disabled={isLoading || isWindowActive}
            />
          </div>
        </form>
      </div>
    </div>
  );
};
