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;