import {NextLinkComposed} from "@/core/components/LinkRouting";
import {
    Badge,
    CircularProgress,
    Collapse,
    IconButton,
    List,
    ListItem,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    Typography,
} from "@mui/material";
import {useTranslations} from "next-intl";
import useNotification from "@/lib/app/hooks/useNotification";

const SidebarListSubItem = ({item, handleDrawerToggle}) => {
    const t = useTranslations();
    const {notification_count} = useNotification();
    const renderBadge = (subitem) => (
        <IconButton>
            <Badge
                badgeContent={notification_count ? notification_count[subitem.name] : 0}
                color="error"
                variant="standard"
                anchorOrigin={{
                    vertical: "top",
                    horizontal: "right",
                }}
            />
        </IconButton>
    );

    return (

        <Collapse in={item.showSubItem} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
            <List component="div" disablePadding sx={{bgcolor: "#f6f6f6", pr: 0}}>
                {item.subItem.map((subitem) => (
                    <ListItem key={subitem.key} disablePadding secondaryAction={renderBadge(subitem)}>
                        <ListItemButton
                            selected={subitem.selected}
                            component={NextLinkComposed}
                            to={{
                                pathname: subitem.route,
                            }}
                            sx={{
                                minHeight: 48,
                            }}
                        >
                            <ListItemIcon
                                sx={{
                                    minWidth: 0,
                                    justifyContent: "center",
                                    width: 40,
                                    height: 24,
                                    pr: 2,
                                }}
                            >
                                {subitem.routing ?
                                    <CircularProgress size={24} color="inherit"/> : subitem.icon}
                            </ListItemIcon>
                            <ListItemText primary={t(subitem.key)} secondary={
                                subitem.secondary !== undefined ? (
                                    <Typography variant="caption" color="textSecondary">
                                        {t(subitem.secondary)}
                                    </Typography>
                                ) : null
                            }/>
                        </ListItemButton>
                    </ListItem>
                ))}
            </List>
        </Collapse>

    );
};

export default SidebarListSubItem;