import Link from "next/link";
import {
  blogItems,
  candidateItems,
  employerItems,
  findJobItems,
  homeItems,
  pageItems,
  shopItems,
} from "../../data/mainMenuData";
import {
  isActiveParent,
  isActiveLink,
  isActiveParentChaild,
} from "../../utils/linkActiveChecker";
import { useRouter } from "next/router";
import { useAuth } from "../../contexts/auth";
import { UserRole } from "../..";
import { useEffect, useState } from "react";
import { useGetCandidateProfileDetails } from "../../utils/hooks/useGetCandidateProfileDetails";

const HeaderNavContent = () => {
  const router = useRouter();
  const { userRole } = useAuth() as unknown as UserRole;
  // const [candidateProfileDetails, setCandidateProfileDetails] =
  //   useState<CandidateProfileDetails>();

  const [candidateId, setCandidateId] = useState<number>(0);

  const fetchCandidateProfileDetails = async () => {
    try {
      const { resp, status } =
        (await useGetCandidateProfileDetails()) as CandidateProfileDetailsResp;
      console.log("Candidate API Data", resp, status);
      setCandidateId(resp.id!);
    } catch (error) {
      console.log(
        "Error Occured when fetching the candidate account details",
        error,
      );
    }
  };

  useEffect(() => {
    if (userRole === "Candidate") {
      fetchCandidateProfileDetails();
    }
  }, [userRole]);

  return (
    <>
      <nav className="nav main-menu">
        <ul className="navigation" id="navbar">
          {/* current dropdown */}
          <li
            className={`${isActiveParent(homeItems, router.asPath) ? "current" : ""}`}
          >
            <Link href={"/"}>
              <span>Home</span>
            </Link>
          </li>
          {/* End homepage menu items */}

          {userRole !== "Company" && (
            <>
              <li
                className={
                  isActiveLink("/about", router.asPath) ? "current" : ""
                }
              >
                <Link href={"/resources"}>
                  <span>Resources</span>
                </Link>
              </li>

              <li
                className={
                  isActiveLink("/jobs", router.asPath) ? "current" : ""
                }
              >
                <Link href={"/jobs"}>
                  <span>Find Jobs</span>
                </Link>
              </li>
            </>
          )}
          {/* End findjobs menu items */}

          <li>
            <Link href="/subscription">
              <span>Pricing</span>
            </Link>
          </li>

          {userRole == "Company" && (
            <>
              <li
                className={`${
                  isActiveParent(employerItems, router.asPath) ||
                  router.asPath === "/dashboard/manage-jobs"
                    ? "current"
                    : ""
                } dropdown`}
              >
                <span>Post Jobs</span>
                <ul>
                  <li
                    className={
                      isActiveLink("/dashboard/manage-jobs", router.asPath)
                        ? "current"
                        : ""
                    }
                  >
                    <Link href="/dashboard/manage-jobs">Manage Jobs</Link>
                  </li>
                  {/* <li
                    className={
                      isActiveLink("/dashboard/packages", router.asPath)
                        ? "current"
                        : ""
                    }
                  >
                    <Link href="/dashboard/packages">Packages</Link>
                  </li> */}
                </ul>
              </li>

              <li
                className={`${
                  isActiveParent(employerItems, router.asPath) ||
                  router.asPath === "/dashboard/manage-jobs"
                    ? "current"
                    : ""
                } dropdown`}
              >
                <span>Company</span>
                <ul>
                  <li
                    className={
                      isActiveLink("/dashboard/company-profile", router.asPath)
                        ? "current"
                        : ""
                    }
                  >
                    <Link href="/dashboard/company-profile">
                      Company Profile
                    </Link>
                  </li>
                  <li
                    className={
                      isActiveLink("/dashboard", router.asPath) ? "current" : ""
                    }
                  >
                    <Link href="/dashboard">Company Dashboard</Link>
                  </li>
                  <li
                    className={
                      isActiveLink("/candidates-list", router.asPath)
                        ? "current"
                        : ""
                    }
                  >
                    <Link href="/candidates-list">Candidates List</Link>
                  </li>
                </ul>
              </li>
            </>
          )}
          {/* End Employers menu items */}

          {userRole == "Candidate" && (
            <li
              className={`${
                isActiveParent(candidateItems, router.asPath) ||
                router.asPath === "/dashboard/"
                  ? "current"
                  : ""
              } dropdown`}
            >
              <span>Candidates</span>
              <ul>
                <li
                  className={
                    router.asPath === "/dashboard/profile" ? "current" : ""
                  }
                >
                  {/* <Link href="/dashboard/profile">Candidates Profile</Link> */}
                  <Link href={`/candidate/${candidateId}`}>
                    Candidate Profile
                  </Link>
                </li>
                <li className={router.asPath === "/dashboard" ? "current" : ""}>
                  <Link href="/dashboard">Candidates Dashboard</Link>
                </li>
                <li
                  className={
                    isActiveLink("/dashboard/vnn-verify", router.asPath)
                      ? "current"
                      : ""
                  }
                >
                  <Link href="/dashboard/vnn-verify">Verification</Link>
                </li>
                {/* <li className={router.asPath === "/companies" ? "current" : ""}>
                    <Link href="/companies">Companies</Link>
                  </li> */}
              </ul>
            </li>
          )}

          {/* End Candidates menu items */}
          {/* End Blog menu items */}

          {userRole !== "Candidate" && userRole !== "Company" && (
            <>
              <li
                className={`${
                  isActiveParent(employerItems, router.asPath) ||
                  router.asPath === ""
                    ? "current"
                    : ""
                } dropdown`}
              >
                <span>Company</span>
                <ul>
                  <li
                    className={
                      isActiveLink("/dashboard/company-profile", router.asPath)
                        ? "current"
                        : ""
                    }
                  >
                    <Link href="/dashboard/company-profile">
                      Company Profile
                    </Link>
                  </li>
                  <li
                    className={
                      isActiveLink("/dashboard", router.asPath) ? "current" : ""
                    }
                  >
                    <Link href="/dashboard">Company Dashboard</Link>
                  </li>
                  <li
                    className={
                      isActiveLink("/enquiry", router.asPath) ? "current" : ""
                    }
                  >
                    <Link href="/candidates-list">Candidate List</Link>
                  </li>
                </ul>
              </li>
              <li
                className={`${
                  isActiveParent(employerItems, router.asPath) ||
                  router.asPath === ""
                    ? "current"
                    : ""
                } dropdown`}
              >
                <span>Candidate</span>
                <ul>
                  <li
                    className={
                      isActiveLink("/dashboard/profile", router.asPath)
                        ? "current"
                        : ""
                    }
                  >
                    <Link href="/dashboard/profile">Candidate Profile</Link>
                  </li>
                  <li
                    className={
                      isActiveLink("/dashboard", router.asPath) ? "current" : ""
                    }
                  >
                    <Link href="/dashboard">Candidate Dashboard</Link>
                  </li>
                  <li
                    className={
                      isActiveLink("/dashboard/vnn-verify", router.asPath)
                        ? "current"
                        : ""
                    }
                  >
                    <Link href="/dashboard/vnn-verify">Verification</Link>
                  </li>
                </ul>
              </li>
            </>
          )}
          {userRole !== "Company" && (
            <li
              className={`${
                isActiveParent(employerItems, router.asPath) ||
                router.asPath === ""
                  ? "current"
                  : ""
              } dropdown`}
            >
              <span>More</span>
              <ul>
                {/* <li
                    className={
                      isActiveLink("/pricing", router.asPath) ? "current" : ""
                    }
                  >
                    <Link href="/pricing">Pricing</Link>
                  </li> */}
                <li
                  className={
                    isActiveLink("/subscription", router.asPath)
                      ? "current"
                      : ""
                  }
                >
                  <Link href="/faq">FAQ</Link>
                </li>
                <li
                  className={
                    isActiveLink("/enquiry", router.asPath) ? "current" : ""
                  }
                >
                  <Link href="/contact-us">Enquiry</Link>
                </li>
                {/* <li
                    className={
                      isActiveLink("/blogs", router.asPath) ? "current" : ""
                    }
                  >
                    <Link href="/blogs">Blogs</Link>
                  </li> */}
              </ul>
            </li>
          )}

          {userRole == "Company" && (
            <>
              <li
                className={
                  isActiveLink("/candidates-list", router.asPath)
                    ? "current"
                    : ""
                }
              >
                <Link href="/candidates-list">CV Search</Link>
              </li>
            </>
          )}
          {/* more menus such as pricing, enquiry, blog */}

          {/* End Pages menu items */}
        </ul>
      </nav>
    </>
  );
};

export default HeaderNavContent;