"use client";
import Link from "next/link";
import {
  ProSidebarProvider,
  Sidebar,
  Menu,
  MenuItem,
  SubMenu,
} from "react-pro-sidebar";
import { mobileMenuData } from "../../../data/mobileMenuData";
import SidebarFooter from "./SidebarFooter";
import SidebarHeader from "./SidebarHeader";
import {
  isActiveLink,
  isActiveParentChaild,
} from "../../../utils/linkActiveChecker";
import { useRouter } from "next/router";
import { AuthContext, useAuth } from "../../../contexts/auth";
import { useContext } from "react";
import { AuthContextType } from "../../..";

const Index = () => {
  const router = useRouter();
  const { isAuthenticated, userRole } = useContext(
    AuthContext
  ) as AuthContextType;

  return (
    <div
      className="offcanvas offcanvas-start mobile_menu-contnet"
      tabIndex={-1}
      id="offcanvasMenu"
      data-bs-scroll="true"
    >
      <SidebarHeader />
      {/* End pro-header */}

      <ProSidebarProvider>
        <Sidebar>
          <Menu>
            {mobileMenuData.map((item) => {
              if (item.id === 4 && !isAuthenticated) {
                return null;
              }
              if (
                (item.id === 4 || item.id === 5) &&
                isAuthenticated &&
                userRole === "Candidate"
              ) {
                return null;
              }
              if (
                (item.id === 2 || item.id === 3 || item.id === 6) &&
                isAuthenticated &&
                userRole === "Company"
              ) {
                return null;
              }
              if (item.id === 7 && isAuthenticated && userRole === "Company") {
                return null;
              }
              if (
                item.id === 8 &&
                (!isAuthenticated || userRole === "Candidate")
              ) {
                return null;
              }
              if (item.items.length === 1) {
                // Check if there's only one item in the 'items' array
                const singleItem = item.items[0];
                return (
                  <MenuItem
                    className={
                      isActiveLink(singleItem.routePath, router.asPath)
                        ? "menu-active-link"
                        : ""
                    }
                    key={item.id}
                    routerLink={<Link href={singleItem.routePath} />}
                  >
                    {singleItem.name}
                  </MenuItem>
                );
              }

              // If there's more than one item, render a dropdown
              return (
                <SubMenu
                  className={
                    isActiveParentChaild(item.items, router.asPath)
                      ? "menu-active"
                      : ""
                  }
                  label={item.label}
                  key={item.id}
                >
                  {item.items.map((menuItem, i) => (
                    <MenuItem
                      className={
                        isActiveLink(menuItem.routePath, router.asPath)
                          ? "menu-active-link"
                          : ""
                      }
                      key={i}
                      routerLink={<Link href={menuItem.routePath} />}
                    >
                      {menuItem.name}
                    </MenuItem>
                  ))}
                </SubMenu>
              );
            })}
          </Menu>
        </Sidebar>
      </ProSidebarProvider>

      <div className="mm-add-listing mm-listitem pro-footer">
        {isAuthenticated && userRole == "Candidate" && (
          <Link
            href="/dashboard/cv-manager"
            className="theme-btn btn-style-one"
          >
            Upload your CV
          </Link>
        )}
        {/* CV upload button  */}

        {isAuthenticated && userRole == "Company" && (
          <Link href="/dashboard/post-jobs" className="theme-btn btn-style-one">
            Job Post
          </Link>
        )}
        {/* job post btn */}
      </div>

      {/* <SidebarFooter /> */}
    </div>
  );
};

export default Index;