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

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