import Menuitems from './MenuItems';
import { usePathname } from "next/navigation";
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import useMediaQuery from '@mui/material/useMediaQuery';
import { CustomizerContext } from '@/app/context/customizerContext';
import NavItem from './NavItem';
import NavCollapse from './NavCollapse';
import NavGroup from './NavGroup/NavGroup';
import { useContext } from 'react';

import { useEffect, useState } from "react";
import axios from "axios";
import { getSession } from "@/utils/sessionData";

import { useSearchParams } from "next/navigation";
// function appendKiosk(path: string | undefined, kioskId: string | null) {
//   if (!path || path === "#") return path ?? "#";
//   return kioskId ? `${path}${path.includes("?") ? "&" : "?"}kiosk_id=${encodeURIComponent(kioskId)}` : path;
// }



const SidebarItems = () => {
  const searchParams = useSearchParams();
  const kioskId = searchParams?.get("kioskId") ?? searchParams?.get("kiosk_id") ?? null;
  const [user, setUser] = useState<any>(null);
  const pathname = usePathname();
  const pathDirect = pathname;
  const pathWithoutLastPart = pathname.slice(0, pathname.lastIndexOf('/'));
  const { isSidebarHover, isCollapse, isMobileSidebar, setIsMobileSidebar } = useContext(CustomizerContext);

  const lgUp = useMediaQuery((theme) => theme.breakpoints.up('lg'));
  const hideMenu = lgUp ? isCollapse == "mini-sidebar" && !isSidebarHover : '';
  useEffect(() => {
    const session = getSession();
    if (!session?.token) return;

    axios.post("/api/getAdmin", { token: session.token })
      .then(res => {
        if (res.data.status !== "error") setUser(res.data.admin);
      })
      .catch(() => { });
  }, []);
  return (
    <Box sx={{ px: 3 }}>
      <List sx={{ pt: 0 }} className="sidebarNav">
        {Menuitems.filter(item => {
          // hide super items if user is NOT super
          if (item.isSuper && user?.role !== "Super") return false;
          return true;
        }).map((item) => {

          // {/********SubHeader**********/}
          if (item.subheader) {
            return <NavGroup item={item} hideMenu={hideMenu} key={item.subheader} />;

            // {/********If Sub Menu**********/}
            /* eslint no-else-return: "off" */
          } else if (item.children) {
            return (
              <NavCollapse
                menu={item}
                href={item?.href}
                pathDirect={pathDirect}
                hideMenu={hideMenu}
                pathWithoutLastPart={pathWithoutLastPart}
                level={1}
                key={item.id}
                onClick={() => setIsMobileSidebar(!isMobileSidebar)}
              />
            );

            // {/********If Sub No Menu**********/}
          } else {
            // console.log(appendKiosk(item?.href, kioskId))
            return (
              <NavItem item={item} href={item?.href} key={item.id} pathDirect={pathDirect} hideMenu={hideMenu} onClick={() => setIsMobileSidebar(!isMobileSidebar)} />
            );
          }
        })}
      </List>
    </Box>
  );
};
export default SidebarItems;
