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;