import Link from "next/link";
import { useEffect, useState } from "react";
import HeaderNavContent from "./HeaderNavContent";
import { useAuth } from "../../contexts/auth";
import { useRouter } from "next/router";
import { LogOutAlert } from "../common/LogOutAlert";

interface Auth {
  isAuthenticated: boolean;
  token: {
    success: boolean;
    token: string;
    message: string;
  };
  logout: () => Promise<boolean>;
  setTokenCookie: (tokens: any) => any;
  loading: boolean;
  userRole: string;
}
const DefaulHeader2 = () => {
  const [navbar, setNavbar] = useState(false);
  const { isAuthenticated, logout, loading, userRole } = useAuth() as Auth;

  const router = useRouter();

  const changeBackground = () => {
    if (window.scrollY >= 10) {
      setNavbar(true);
    } else {
      setNavbar(false);
    }
  };

  const handleLogout = async () => {
    const confirmed = await LogOutAlert(); // Wait for confirmation
    if (confirmed) {
      router.push("/logout"); // Perform routing after successful logout
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", changeBackground);
  }, []);

  return (
    // <!-- Main Header-->
    <header
      className={`main-header bg-white ${
        navbar ? "fixed-header animated slideInDown" : ""
      }`}
    >
      {/* <!-- Main box --> */}
      <div className="main-box">
        {/* <!--Nav Outer --> */}
        <div className="nav-outer">
          <div className="logo-box">
            <div className="logo">
              <Link href="/">
                <img src="/images/human_capital_logo.png" alt="brand" />
              </Link>
            </div>
          </div>
          {/* End .logo-box */}

          <HeaderNavContent />
          {/* <!-- Main Menu End--> */}
        </div>
        {/* End .nav-outer */}

        <div className="outer-box">
          {/* <!-- Add Listing --> */}
          {userRole == "Candidate" && (
            <Link
              href="/dashboard/cv-manager"
              id="upload_cv"
              className="upload-cv"
            >
              Create your CV
            </Link>
          )}
          {/* <!-- Login/Register --> */}
          <div className="btn-box px-3">
            {!isAuthenticated ? (
              <Link href="/login" className="theme-btn btn-style-three">
                Login / Register
              </Link>
            ) : (
              <Link
                className="theme-btn btn-style-three"
                href="#"
                onClick={handleLogout}
              >
                Logout
              </Link>
            )}

            {userRole == "Company" && (
              <Link
                href="/dashboard/post-jobs"
                className="theme-btn btn-style-one"
                id="job_post"
              >
                Job Post
              </Link>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default DefaulHeader2;