import * as React from 'react';
import { Nav } from 'react-bootstrap';

import { 
    Fingerprint, History, MiscellaneousServices , 
    ExpandLess, ExpandMore
} from '@mui/icons-material/'

import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'

import { 
    MainItems, ExtraItems, PruebaItems
} from '../../Utils/MenuItems'

function NavItem (props) {
    
    let navigate = useNavigate()
    let resolved = useResolvedPath(props.route);
    let match = useMatch({ path: resolved.pathname, end: true });

    let { title, route, icon, open, AppBarVisible, setOpen } = props

    if(route.startsWith('prueba') && match && open && !AppBarVisible ){
        setOpen(false);
    }


    return(
        <ListItem
            sx={{ color : '#25344f'}}
            selected={ match && typeof(match) === "object" }
            onClick={() => navigate(route) } 
            button >
            <ListItemIcon>
                {icon && icon}
            </ListItemIcon>
            <ListItemText 
                sx={{
                    fontSize: 12,
                    ' .css-10hburv-MuiTypography-root' : {
                        fontSize : '.875rem'
                    },
                }}
                primary={title} 
            />
        </ListItem>
    )
}


export const MainListItems = (props) =>  {

    const [open, setOpen] = React.useState(false);

    const showPruebas = () => {
        if(!props.AppBarVisible){
            props.setAppBarVisible(true);
        }
        setOpen(!open);
    };

    return(
        <List>

            <ListSubheader inset>MENÚ</ListSubheader>


            {
                MainItems.map( ({ icon, title, route}) =>  (
                    <NavItem icon={icon} title={title} route={route} />
                ))
            }

            <ListItem selected={open} onClick={showPruebas}>
                <ListItemIcon>
                    <Fingerprint />
                </ListItemIcon>


                <ListItemText 
                    sx={{
                        fontSize: 12,
                        ' .css-10hburv-MuiTypography-root' : {
                            fontSize : '.875rem'
                        },
                    }}
                    primary="Pruebas" 
                />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItem>


            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    {
                        PruebaItems.map( ({ route, title}) => 
                            ( <NavItem setOpen={setOpen} { ...props} open={open} route={route} title={title} />)
                        )
                    }
                </List>
            </Collapse>

            <NavItem icon={<MiscellaneousServices/>} title="Configuraciones" route="configuraciones" />
            <NavItem icon={<History/>} title="Historial" route="historial" />
        </List>
    )
};

export const SecondaryListItems = (
    <Nav>
        <ListSubheader inset>EXTRAS</ListSubheader>
        {
            ExtraItems.map( ({ icon, route, title}) => 
                ( <NavItem icon={icon} title={title} route={route} />)
            )
        }
    </Nav>
);