import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import { authStore, NAVIGATION_ITEMS } from "@shared";
import { NavigationItem, NavigationItemComponent } from "@entities";
import { observer } from "mobx-react-lite";

interface NavigationListProps {
  open: boolean;
  onDrawerOpen?: () => void;
}

export const NavigationList = observer(
  ({ open, onDrawerOpen }: NavigationListProps) => {
    const { payload } = authStore;
    // @ts-ignore
    const isAdmin = Boolean(payload?.is_admin) || false;

    const primaryItems = NAVIGATION_ITEMS.primary.filter((item) => {
      if (item.for_admin) {
        return isAdmin;
      }

      if (item.nestedItems && item.nestedItems.length > 0) {
        return item.nestedItems.some((nestedItem) => {
          if (nestedItem.for_admin) {
            return isAdmin;
          }
          return true;
        });
      }

      return true;
    });

    return (
      <>
        <List>
          {primaryItems.map((item) => (
            <NavigationItemComponent
              key={item.id}
              item={item as NavigationItem}
              open={open}
              onDrawerOpen={onDrawerOpen}
            />
          ))}
        </List>
        <Divider />
        <List>
          {NAVIGATION_ITEMS.secondary.map((item) => (
            <NavigationItemComponent
              key={item.id}
              item={item as NavigationItem}
              open={open}
              onClick={item.onClick ? item.onClick : undefined}
              onDrawerOpen={onDrawerOpen}
            />
          ))}
        </List>
      </>
    );
  }
);