"use client";
import SidebarListItems from "@/core/components/SidebarListItems";
import { List } from "@mui/material";
import { usePathname } from "next/navigation";
import { useEffect, useReducer, useState } from "react";
import { pageMenu } from "../utils/pageMenu";

function reducer(state, action) {
  switch (action.type) {
    case "COLLAPSE_MENU":
      return state.map((item) =>
        action.id == item.id
          ? {
              ...item,
              showSubitems: !item.showSubitems,
            }
          : item
      );
    case "COLLAPSE_SUB_ITEMS":
      return state.map((item) => {
        return item.hasSubitems
          ? {
              ...item,
              Subitems: item.Subitems.map((subitem) =>
                action.id === subitem.id
                  ? {
                      ...subitem,
                      showSubitems: !subitem.showSubitems,
                    }
                  : subitem
              ),
            }
          : item;
      });
    case "COLLAPSE_SUB_SECOND_ITEMS":
      return state.map((item) => {
        return item.hasSubitems
          ? {
              ...item,
              Subitems: item.Subitems.map((subitem) => {
                return subitem.hasSubitems
                  ? {
                      ...subitem,
                      Subitems: subitem.Subitems.map((secondSubitem) =>
                        action.id === secondSubitem.id
                          ? {
                              ...secondSubitem,
                              showSubitems: !secondSubitem.showSubitems,
                            }
                          : secondSubitem
                      ),
                    }
                  : subitem;
              }),
            }
          : item;
      });
    case "SELECTED":
      return state.map((item) => {
        return item.type === "page"
          ? {
              ...item,
              selected: action.route === item.route,
              showSubitems: item.route === action.route,
            }
          : item.Subitems && Array.isArray(item.Subitems)
          ? {
              ...item,
              Subitems: item.Subitems.map((subitem) => {
                return subitem.type === "page"
                  ? {
                      ...subitem,
                      selected: action.route === subitem.route,
                      showSubitems: subitem.route === action.route,
                    }
                  : subitem.Subitems && Array.isArray(subitem.Subitems)
                  ? {
                      ...subitem,
                      Subitems: subitem.Subitems.map((secondSubItem) => ({
                        ...secondSubItem,
                        selected: secondSubItem.route === action.route,
                      })),
                      showSubitems: subitem.Subitems.some(
                        (secondSubItem) => secondSubItem.route === action.route
                      ),
                    }
                  : subitem;
              }),
              showSubitems: item.Subitems.some(
                (subitem) => subitem.showSubitems
              ),
            }
          : item;
      });

    default:
      throw new Error();
  }
}

const SidebarMenu = () => {
  const [menuItems, dispatch] = useReducer(reducer, pageMenu);
  const pathname = usePathname();
  const [selectedKey, setSelectedKey] = useState(null);
  useEffect(() => {
    dispatch({ type: "SELECTED", route: pathname });
    setSelectedKey(pathname);
  }, [pathname]);

  useEffect(() => {
    selectedKey &&
      document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
        behavior: "smooth",
        block: "center",
      });
  }, [selectedKey]);

  return (
    <List disablePadding dense>
      {menuItems.map((menuItem) => {
        return (
          <SidebarListItems
            dispatch={dispatch}
            key={menuItem.id}
            menuItem={menuItem}
          />
        );
      })}
    </List>
  );
};
export default SidebarMenu;
