import * as React from 'react';

import { Nav } from 'react-bootstrap';

import { 
    Home, Fingerprint, History, MiscellaneousServices , 
    Work, VisibilityOff, PeopleAlt, Equalizer,
    OndemandVideo, SupportAgent, Star,
    ExpandLess, ExpandMore
} from '@mui/icons-material/'


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

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);
        // setAppBarVisible(true)
    }


    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>

            <NavItem icon={<Home/>} title="Inicio" route="home" />
            <NavItem icon={<Work/>} title="Puestos" route="puestos" />
            <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
            <NavItem icon={<PeopleAlt/>}  title="Expedientes" route="expedientes" />
            <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />

            <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>

                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/crear" title="Crear Prueba" />
                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/listar"  title="Listado de pruebas" />
                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/aplicar"  title="Aplicar" />
                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/respuestas" title="Respuestas" />
                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/calificaciones" title="Calificaciones" />

                </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>
        <NavItem icon={<Star/>} title="Elementos" route="/work" />
        <NavItem icon={<OndemandVideo/>} title="Tutoriales" route="/worktwo" />
        <NavItem icon={<SupportAgent/>} title="Asistencia Técnica" route="/worktree" />
    </Nav>
);
