import { ExpandLess, ExpandMore } from "@mui/icons-material";
import {
  Collapse,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
} from "@mui/material";
import Link from "next/link";

const SidebarSubitems = ({ subitem, dispatch }) => {
  return (
    <>
      <ListItem disablePadding divider>
        <ListItemButton
          disableGutters
          sx={{ py: 1, px: 0.5, pl: 1 }}
          selected={subitem.selected}
          component={subitem.type === "page" ? Link : null}
          href={subitem.type === "page" ? subitem.route : null}
          onClick={() => {
            dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
          }}
        >
          <ListItemIcon
            sx={{
              minWidth: 0,
              justifyContent: "center",
              width: 40,
              height: 24,
            }}
          >
            {subitem.icon}
          </ListItemIcon>
          <ListItemText primary={subitem.label} />
          {subitem.hasSubitems ? (
            subitem.showSubitems ? (
              <ExpandLess />
            ) : (
              <ExpandMore />
            )
          ) : null}
        </ListItemButton>
      </ListItem>
      <Collapse
        in={subitem.showSubitems}
        timeout="auto"
        mountOnEnter={true}
        unmountOnExit={true}
      >
        {subitem.hasSubitems ? (
          <List
            disablePadding
            dense
            sx={{
              background: "#00000008",
            }}
          >
            {subitem.Subitems.map((subSubitem, index) => {
              return (
                <SidebarSubitems
                  key={index}
                  dispatch={dispatch}
                  subitem={subSubitem}
                />
              );
            })}
          </List>
        ) : null}
      </Collapse>
    </>
  );
};
export default SidebarSubitems;