import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "./assets/css/styles.css";
import {
  faEye,
  faEyeSlash,
  faWindowClose,
} from "@fortawesome/free-solid-svg-icons";
import { useResetPassword } from "../../../domain/useCase/useResetPassword";

interface props {
  handleClickToClose: () => void; // Function to handle closing the reset password window.
}

// ResetPasswordWindow component handles the password reset process.
export const ResetPasswordWindow = ({ handleClickToClose }: props) => {
  const {
    animating,
    step,
    register,
    handleSubmitEmail,
    onSubmitPassword,
    errors,
    handleSubmit,
    isChanging,
    valuesNewPassword,
    valuesNewPasswordConfirm,
    handleClickShowNewPassword,
    handleClickShowNewPasswordConfirm,
    handleMouseDownNewPassword,
    handleMouseDownNewPasswordConfirm,
  } = useResetPassword(handleClickToClose); // Custom hook to manage reset password logic.

  return (
    <div className="reset-password-window">
      <div className="header">
        <FontAwesomeIcon
          icon={faWindowClose}
          className="reset-pass-close-btn"
          onClick={() => handleClickToClose()} // Close button for the reset password window.
        />
      </div>
      <div className="body">
        <div
          className={`panel ${!isChanging ? "panel-enter" : "panel-exit"} ${
            animating ? "panel-enter-active" : ""
          }`}
        >
          {step === 1 && (
            <div className="email-panel">
              <h2>Ingrese su correo electrónico existente</h2>
              <input type="email" autoComplete="off" {...register("email")} />
              <p className="error">{errors.email?.message}</p>
              <button onClick={handleSubmitEmail}>Enviar</button>
            </div>
          )}
          {step === 2 && (
            <div className="code-panel">
              <form onSubmit={handleSubmit(onSubmitPassword)}>
                <input type="hidden" {...register("email")} />
                <div className="input_cnt">
                  <label>
                    Ingrese el código de 6 dígitos que llegó a su correo
                  </label>
                  <div className="password_cnt">
                    <input
                      type="text"
                      autoComplete="false"
                      {...register("code")}
                      maxLength={6}
                    />
                  </div>
                  <p className="error">{errors.code?.message}</p>
                </div>

                <div className="input_cnt">
                  <label>Nueva contraseña</label>
                  <div className="password_cnt">
                    <input
                      type={
                        valuesNewPassword.showPassword ? "text" : "password"
                      }
                      {...register("newPassword")}
                      autoComplete="off"
                    />
                    <FontAwesomeIcon
                      className="visibility-button"
                      onClick={handleClickShowNewPassword}
                      onMouseDown={handleMouseDownNewPassword}
                      icon={valuesNewPassword.showPassword ? faEye : faEyeSlash}
                    />
                  </div>
                  <p className="error">{errors.newPassword?.message}</p>
                </div>

                <div className="input_cnt">
                  <label>Confirmar nueva contraseña</label>
                  <div className="password_cnt">
                    <input
                      type={
                        valuesNewPasswordConfirm.showPassword
                          ? "text"
                          : "password"
                      }
                      {...register("confirmNewPassword")}
                      autoComplete="off"
                    />
                    <FontAwesomeIcon
                      className="visibility-button"
                      onClick={handleClickShowNewPasswordConfirm}
                      onMouseDown={handleMouseDownNewPasswordConfirm}
                      icon={
                        valuesNewPasswordConfirm.showPassword
                          ? faEye
                          : faEyeSlash
                      }
                    />
                  </div>
                  <p className="error">{errors.confirmNewPassword?.message}</p>
                </div>

                <div className="input_cnt">
                  <input
                    className="submit_btn"
                    type="submit"
                    content="Cambiar"
                  />
                </div>
              </form>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
