import {NextLinkComposed} from "@/core/components/LinkRouting";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import {Collapse, List, ListItemButton, ListItemIcon, ListItemText,} from "@mui/material";
import {useTranslations} from "next-intl";
import {Fragment} from "react";

const SidebarListSubItem = ({item, handleDrawerToggle}) => {
    const t = useTranslations();

    return (
        <Collapse in={item.showSubItem} timeout="auto" unmountOnExit>
            <List component="div" disablePadding sx={{bgcolor: "#f6f6f6"}}>
                {item.subItem.map((subitem, index) => (
                    <Fragment key={subitem.key}>
                        <ListItemButton
                            component={NextLinkComposed}
                            to={{
                                pathname: subitem.route,
                            }}
                            sx={{
                                minHeight: 48,
                            }}
                            onClick={(event) => {
                                if (item.type == "menu") {
                                    dispatch({type: "COLLAPSE_MENU", key: item.key});
                                }
                                handleDrawerToggle();
                            }}
                        >
                            <ListItemIcon
                                sx={{
                                    minWidth: 0,
                                    justifyContent: "center",
                                    pr: 2,
                                }}
                            >
                                <InboxIcon/>
                            </ListItemIcon>
                            <ListItemText primary={t(subitem.key)}/>
                        </ListItemButton>
                    </Fragment>
                ))}
            </List>
        </Collapse>
    );
};

export default SidebarListSubItem;