import {Collapse, ListItem, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
import { ExpandLess, ExpandMore } from '@mui/icons-material';
import WifiIcon from '@mui/icons-material/Wifi';
import SidebarSubitems from "@/core/components/SidebarSubitems";

const SidebarListItems = ({menuItem, dispatch}) => {
    return(
        <>
            <ListItem disablePadding sx={{p : 0}}>
                <ListItemButton sx={{
                    '&.Mui-selected': {
                        backgroundColor: 'rgba(0, 0, 0, 0.2)',
                    },
                }} selected={menuItem.selected} onClick={() => {
                    dispatch({type: "COLLAPSE_MENU", id: menuItem.id})
                }}>
                    <ListItemIcon
                        sx={{
                            minWidth: 0,
                            justifyContent: "center",
                            color: "primary.main",
                            width: 40,
                            height: 24,
                            pr: 2,
                        }}
                    >
                        {menuItem.icon}
                    </ListItemIcon>
                    <ListItemText primary={menuItem.id} />
                    {menuItem.hasSubitems ? (menuItem.showSubitems ? <ExpandLess /> : <ExpandMore />) : null }
                </ListItemButton>
            </ListItem>
            <Collapse in={menuItem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
                {
                    menuItem.hasSubitems ?  (menuItem.Subitems.map((subitem,index)=>{
                        return(
                            <SidebarSubitems dispatch={dispatch} key={index} subitem={subitem}/>
                        )
                    })) : null
                }
            </Collapse>

        </>
    )
}
export default SidebarListItems