import * as React from 'react';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
import { NavLink } from 'react-router-dom';

type Item = {
    name: string,
    icon?: React.ReactElement,
    href: string,
    open?: boolean,
    children?: Item[],
}

const sidebarConfig: Item[] = [
    {
        name: 'Dashboard',
        icon: <DashboardIcon />,
        href: '/dashboard',
    },
    {
        name: 'Proudct',
        icon: <ProductionQuantityLimitsIcon />,
        open: false,
        href: '',
        children: [
            { name: 'Starred', href: '/test' },
            { name: 'Received', href: '/test' },
            { name: 'Sent', href: '/test' },
            { name: 'Important', href: '/test' },
        ],
    },
    {
        name: 'Inbox',
        icon: <InboxIcon />,
        open: false,
        href: '',
        children: [
            { name: 'Starred', href: '/test' },
            { name: 'Received', href: '/test' },
            { name: 'Sent', href: '/test' },
            { name: 'Important', href: '/test' },
        ],
    }
]

function RenderItem({ item }: { item: Item }) {
    const [open, setOpen] = React.useState(item.open);

    const handleClick = () => {
        setOpen(!open);
    };
    if (item.children) {
        return (
            <>
                <ListItemButton
                    component="div"
                    onClick={handleClick}
                >
                    <ListItemIcon>{item.icon}</ListItemIcon>
                    <ListItemText primary={item.name} />
                    {open ? <ExpandLess /> : <ExpandMore />}
                </ListItemButton>
                <Collapse in={open} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        {item.children?.map((child) => (
                            <NavLink to={item.href} key={child.name}>
                                <ListItemButton component="div">
                                    <ListItemText primary={child.name} sx={{ ml: "55px" }} />
                                </ListItemButton>
                            </NavLink>

                        ))}
                    </List>
                </Collapse>
            </>
        );
    } else {
        return (
            <NavLink to={item.href}>
                <ListItemButton>
                    <ListItemIcon>
                        {item.icon}
                    </ListItemIcon>
                    <ListItemText primary={item.name} />
                </ListItemButton>
            </NavLink>

        );
    }

}

export default function MySidebar() {
    return (
        <List
            sx={{ width: '100%', maxWidth: 200, bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
            subheader={
                <ListSubheader component="div" id="nested-list-subheader">
                    Nested List Items
                </ListSubheader>
            }
        >
            {

                sidebarConfig.map(item => {
                    return (
                        <RenderItem item={item} key={item.name} />
                    )
                })

            }
        </List>
    );
}