import React from 'react';
import Hook from '../../hook';
import {
    Accordion,
    AccordionSummary,
    Divider,
    ListItem,
    ListItemIcon,
    ListItemText,
    Typography
} from '@mui/material';
import { ExpandMore } from '@mui/icons-material';
import {
    SideMenuContentChildren,
    SideMenuContentPanel
} from './styled.panel-content';

export interface AppSideSubMenuItem {
    path: string;
    icon: React.FC<any>;
    label: string,
}

export interface AppSideMenuItem {
    path: string;
    icon: React.FC<any>;
    label: string,
    children?: AppSideSubMenuItem[];
}

export interface AppSideMenuContentProps {
    path: string,
    menuItems: AppSideMenuItem[],
}

export const AppSideMenuContent: React.FC<AppSideMenuContentProps> = ({ menuItems }) => {
    const [theme] = Hook.useTheme();
    const [, navigate] = Hook.useRouter();
    const pathname = window.location.pathname.toLowerCase();

    const [expanded, setExpanded] = React.useState<string | false>(pathname);

    const handleExpandedChange = (panel: string) =>
        (e: any, isExpanded: boolean) => {
            setExpanded(isExpanded ? panel : !e && false);
        }
    const handleRedirect = (route: string) =>
        () => {
            navigate(route)
        }

    return (
        <SideMenuContentPanel>
            {
                menuItems.map(item => (
                    <React.Fragment key={item.path}>
                        {
                            !item.children || item.children.length === 0
                                ? <>
                                    <Divider />
                                    <ListItem button
                                        style={{
                                            width: '100%',
                                            color: pathname.startsWith(item.path.toLowerCase())
                                                ? theme.palette.primary.light
                                                : ''
                                        }}
                                        onClick={handleRedirect(item.path)}>

                                        <ListItemIcon>
                                            <item.icon
                                                style={{
                                                    color: pathname.startsWith(item.path.toLowerCase())
                                                        ? theme.palette.primary.main
                                                        : theme.palette.primary.light
                                                }} />
                                        </ListItemIcon>
                                        <ListItemText primary={
                                            <Typography style={{
                                                whiteSpace: 'nowrap',
                                                overflow: 'hidden',
                                                textOverflow: 'ellipsis'
                                            }}>
                                                {item.label}
                                            </Typography>
                                        } />
                                    </ListItem>
                                </>
                                : <Accordion
                                    expanded={!!expanded && expanded.startsWith(item.path.toLowerCase())}
                                    onChange={handleExpandedChange(item.path.toLowerCase())}>
                                    <AccordionSummary
                                        expandIcon={<ExpandMore />}
                                        aria-controls={`${item.path}-content`}
                                        id={`${item.path}-header`}
                                        style={{
                                            color: pathname.startsWith(item.path.toLowerCase())
                                                ? theme.palette.primary.light
                                                : ''
                                        }}>

                                        <ListItemIcon>
                                            <item.icon
                                                style={{
                                                    color: pathname.startsWith(item.path.toLowerCase())
                                                        ? theme.palette.primary.main
                                                        : theme.palette.primary.light
                                                }} />
                                        </ListItemIcon>
                                        <Typography>
                                            {item.label}
                                        </Typography>
                                    </AccordionSummary>

                                    <SideMenuContentChildren>
                                        {
                                            item.children.map(child => (
                                                <React.Fragment key={child.path}>
                                                    <Divider />
                                                    <ListItem button
                                                        style={{
                                                            width: '100%',
                                                            color: pathname.startsWith(child.path.toLowerCase())
                                                                ? theme.palette.primary.light
                                                                : ''
                                                        }}
                                                        onClick={handleRedirect(child.path)}>

                                                        <ListItemIcon>
                                                            <child.icon
                                                                style={{
                                                                    color: pathname.startsWith(child.path.toLowerCase())
                                                                        ? theme.palette.primary.main
                                                                        : theme.palette.primary.light
                                                                }} />
                                                        </ListItemIcon>
                                                        <ListItemText primary={
                                                            <Typography>
                                                                {child.label}
                                                            </Typography>
                                                        } />
                                                    </ListItem>
                                                </React.Fragment>
                                            ))
                                        }
                                    </SideMenuContentChildren>
                                </Accordion>
                        }
                    </React.Fragment>
                ))
            }
        </SideMenuContentPanel>
    );
}