import { ExpandLess, ExpandMore } from "@mui/icons-material";
import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack, useMediaQuery, useTheme } from "@mui/material";
import Link from "next/link";
import SidebarBadge from "./SidebarBadge";

const SidebarSubitems = ({ subitem, dispatch, handleDrawerClose }) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("md"));
    return (
        <>
            <ListItem disablePadding divider>
                <ListItemButton
                    disableGutters
                    sx={{ p: 0.5, pl: 1 }}
                    selected={subitem.selected}
                    component={subitem.type === "page" ? Link : null}
                    href={subitem.type === "page" ? subitem.route : null}
                    onClick={() => {
                        if (subitem.type !== "page") {
                            dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
                        } else {
                            if (isMobile) {
                                handleDrawerClose()
                            }
                        }
                    }}
                >
                    <ListItemIcon
                        sx={{
                            minWidth: 0,
                            justifyContent: "center",
                            width: 40,
                            height: 24,
                        }}
                    >
                        {subitem.icon}
                    </ListItemIcon>
                    <ListItemText primary={subitem.label} />
                    {subitem.badges && (
                        <Stack direction={"row"} sx={{ px: 0.5 }} spacing={0.5}>
                            {subitem.badges.map((badge, i) => (
                                <SidebarBadge
                                    chipProps={{
                                        color: badge.color || "default",
                                        variant: "outlined",
                                    }}
                                    key={badge.key}
                                    badge={badge.key}
                                />
                            ))}
                        </Stack>
                    )}
                    {subitem.hasSubitems ? (
                        subitem.showSubitems ? (
                            <ExpandLess />
                        ) : (
                            <ExpandMore />
                        )
                    ) : (
                        <Box sx={{ width: 29 }} />
                    )}
                </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 handleDrawerClose={handleDrawerClose} key={index} dispatch={dispatch} subitem={subSubitem} />;
                        })}
                    </List>
                ) : null}
            </Collapse>
        </>
    );
};
export default SidebarSubitems;