// Import necessary modules and components
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faEye,
  faEyeSlash,
  faSignOut,
  faUser,
  faWindowClose,
} from "@fortawesome/free-solid-svg-icons";
import { Link } from "react-router-dom";
import "./assets/styles/style.css";
import { UserRole } from "../../../core/constants/roles";
import { useUserData } from "../../../domain/useCase/useUserData";
import { Dispatch, SetStateAction, useState } from "react";
import { useAdminChangePassword } from "../../../domain/useCase/useAdminChangePassword";
import { usePasswoordVisibility } from "../../../domain/useCase/usePasswordVisibility";

// Define the props interface for the component
interface props {
  isWindowActive: boolean;
  setIsWindowActive: Dispatch<SetStateAction<boolean>>;
}

// Define the AdminPanelNavBar component
export const AdminPanelNavBar = ({
  isWindowActive,
  setIsWindowActive,
}: props) => {
  // Use custom hooks to manage user data and password visibility
  const { user, handleLogout, setToggle, toggle, userData } = useUserData();
  const [changePasswordWindowActive, setChangePasswordWindowActive] =
    useState(false);
  const setChangePasswordWindowVisibility = (visibility: boolean) => {
    setIsWindowActive(visibility);
    setChangePasswordWindowActive(visibility);
  };
  const { register, handleSubmit, errors, onSubmit } = useAdminChangePassword(
    setChangePasswordWindowVisibility
  );
  const {
    values: valuesPrevPassword,
    handleClickShowPassword: handleClickShowPrevPassword,
    handleMouseDownPassword: handleMouseDownPrevPassword,
  } = usePasswoordVisibility();
  const {
    values: valuesNewPassword,
    handleClickShowPassword: handleClickShowNewPassword,
    handleMouseDownPassword: handleMouseDownNewPassword,
  } = usePasswoordVisibility();
  const {
    values: valuesNewPasswordConfirm,
    handleClickShowPassword: handleClickShowNewPasswordConfirm,
    handleMouseDownPassword: handleMouseDownNewPasswordConfirm,
  } = usePasswoordVisibility();

  // Return null if the user is not logged in or does not have the correct role
  if (!user) {
    return null;
  } else {
    if (user.role !== UserRole.ADMIN && user.role !== UserRole.SUPERADMIN) {
      return null;
    }
  }

  // Render the navigation bar
  return (
    <div className="navbar">
      <div className="profile">
        <img
          src={require("./assets/images/Admin-595b40b65ba036ed117d36fe.png")}
          className="user-pic"
          onClick={() => {
            isWindowActive ? setToggle(false) : setToggle(!toggle);
          }}
          style={isWindowActive ? { cursor: "auto" } : { cursor: "pointer" }}
          alt="User"
        />
        {toggle && (
          <div className="profile-sub-menu-wrap">
            <div className="sub-menu">
              <div className="user-info">
                <img
                  src={require("./assets/images/Admin-595b40b65ba036ed117d36fe.png")}
                  alt=""
                />
                <h3>{userData?.name}</h3>
              </div>
              <hr />

              <Link
                to="/"
                onClick={() => {
                  setChangePasswordWindowVisibility(true);
                  setToggle(false);
                }}
                className="sub-menu-link"
              >
                <FontAwesomeIcon icon={faUser} className="sub-menu-link-icon" />
                <p>Cambiar contraseña</p>
              </Link>

              <Link onClick={handleLogout} to="/" className="sub-menu-link">
                <FontAwesomeIcon
                  icon={faSignOut}
                  className="sub-menu-link-icon"
                />
                <p>Cerrar sesión</p>
              </Link>
            </div>
          </div>
        )}
      </div>
      {changePasswordWindowActive && (
        <div className="change-password-window">
          <div className="header">
            Cambio de contraseña
            <FontAwesomeIcon
              icon={faWindowClose}
              className="close_btn"
              onClick={() => setChangePasswordWindowVisibility(false)}
            />
          </div>

          <div className="content">
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="input_cnt">
                <label>Contraseña actual</label>
                <div className="password_cnt">
                  <input
                    type={valuesPrevPassword.showPassword ? "text" : "password"}
                    {...register("prevPassword")}
                    autoComplete="off"
                  />
                  <FontAwesomeIcon
                    className="visibility-button"
                    onClick={handleClickShowPrevPassword}
                    onMouseDown={handleMouseDownPrevPassword}
                    icon={valuesPrevPassword.showPassword ? faEye : faEyeSlash}
                  />
                </div>
                <p className="error">{errors.prevPassword?.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("newPasswordConfirm")}
                    autoComplete="off"
                  />
                  <FontAwesomeIcon
                    className="visibility-button"
                    onClick={handleClickShowNewPasswordConfirm}
                    onMouseDown={handleMouseDownNewPasswordConfirm}
                    icon={
                      valuesNewPasswordConfirm.showPassword ? faEye : faEyeSlash
                    }
                  />
                </div>
                <p className="error">{errors.newPasswordConfirm?.message}</p>
              </div>

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