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

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