import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';

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

// project import
import NavItem from './NavItem';
import {useContext} from "react";
import AbilityContext from "../../../../../components/AbilityProvider";
import {LIONER_NAV_THEME} from "../../../../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";
import {GENERAL_INFO_COLOR} from "../../../../../themes/colorConst";

// ==============================|| NAVIGATION - LIST GROUP ||============================== //

const NavGroup = ({ item }) => {
  const ability = useContext(AbilityContext);
  const menu = useSelector((state) => state.menu);
  const { drawerOpen } = menu;
  let availableChildren = item.children.length;

  const navCollapse = item.children?.map((menuItem) => {
    switch (menuItem.type) {
      case 'collapse':
        return (
          <Typography key={menuItem.id} variant="caption" color="error" sx={{ p: 2.5 }}>
            collapse - only available in paid version
          </Typography>
        );
      case 'item':
          if(menuItem.ability !== undefined){
              if(ability.can(menuItem.ability[0], menuItem.ability[1])){
                  return <NavItem key={menuItem.id} item={menuItem} level={1} />;
              }
              else{
                  availableChildren--;
                  return undefined;
              }
          }
          else{
              return <NavItem key={menuItem.id} item={menuItem} level={1} />;
          }
      default:
          if(menuItem.ability !== undefined){
              if(ability.can(menuItem.ability[0], menuItem.ability[1])){
                  return (
                      <Typography key={menuItem.id} variant="h6" color="error" align="center">
                          Fix - Group Collapse or Items
                      </Typography>
                  );
              }
              else{
                  availableChildren--;
                  return undefined;
              }
          }
          else{
              return (
                  <Typography key={menuItem.id} variant="h6" color="error" align="center">
                      Fix - Group Collapse or Items
                  </Typography>
              );
          }
    }
  });

  return (
    <List
      subheader={
        item.title &&
        drawerOpen && (
            availableChildren > 0 ?
          <Box sx={{ pl: 2, mb: 0.5 }}>
              <ThemeProvider theme={LIONER_NAV_THEME}>
                  <Typography color={GENERAL_INFO_COLOR}>
                      {item.title}
                  </Typography>
              </ThemeProvider>
            {/* only available in paid version */}
          </Box>
                :
                undefined
        )
      }
      sx={{ mb: drawerOpen ? 1.5 : 0, py: 0, zIndex: 0 }}
    >
      {navCollapse}
    </List>
  );
};

NavGroup.propTypes = {
  item: PropTypes.object
};

export default NavGroup;
