// material-ui
import { Box, Typography } from '@mui/material';

// project import
import NavGroup from './NavGroup';
import menuItem from 'menu-items';
import AbilityContext from "../../../../../components/AbilityProvider";
import {useContext} from "react";

// ==============================|| DRAWER CONTENT - NAVIGATION ||============================== //

const Navigation = () => {
  const ability = useContext(AbilityContext);
  const navGroups = menuItem.items.map((item) => {
    switch (item.type) {
      case 'group':
        if(item.ability !== undefined){
          if(ability.can(item.ability[0], item.ability[1])){
            return <NavGroup key={item.id} item={item} />;
          }
          else{
            return undefined;
          }
        }
        else{
          return  <NavGroup key={item.id} item={item} />;
        }
      default:
        if(item.ability !== undefined){
          if(ability.can(item.ability[0], item.ability[1])){
            return (
                <Typography key={item.id} variant="h6" color="error" align="center">
                  Fix - Navigation Group
                </Typography>
            );
          }
          else{
            return undefined;
          }
        }
        else{
          return (
              <Typography key={item.id} variant="h6" color="error" align="center">
                Fix - Navigation Group
              </Typography>
          );
        }
    }
  });

  return <Box sx={{ pt: 2 }}>{navGroups}</Box>;
};

export default Navigation;
