import * as React from 'react';
import ListItem from '@mui/material/ListItem';
import List from '@mui/material/List';

import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';

import { Nav } from 'react-bootstrap';

import HomeIcon from '@mui/icons-material/Home'
import WorkIcon from '@mui/icons-material/Work';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
import HistoryIcon from '@mui/icons-material/History';
import EqualizerIcon from '@mui/icons-material/Equalizer';
import FingerprintIcon from '@mui/icons-material/Fingerprint';

import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices';

import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
import StarIcon from '@mui/icons-material/Star';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';

import Collapse from '@mui/material/Collapse';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import { useNavigate } from 'react-router-dom'
import useAuth from '../Auth/useAuth'
    
const SubMenuList = [5,6,7,8,9]

function SubMenuItem (props) {

    let navigate = useNavigate()

    function change (event){
        props.change(event, props.index)
        if(props.route){
            navigate(props.route)
        }
    } 

    let isOn = props.selected === props.index

    return(
        <ListItem 
            sx={{ pl: 9}}
            selected={isOn}
            onClick={change} 
            button
        >
            <ListItemText 
                sx={{
                    fontSize: 12,
                    ' .css-10hburv-MuiTypography-root' : {
                        fontSize : '.875rem'
                    },
                }}
                primary={props.title} 
            />
        </ListItem>
    )
}

function Item (props) {

    let navigate = useNavigate()
    let auth = useAuth()

    function change (event){
        props.change(event, props.index)
        // console.log('is logged', auth.isLogged())

        if(!auth.isLogged()){
            return navigate('/')
        }

        navigate(props.route)
    } 

    let isOn = props.selected === props.index

    //.css-10oikv1-MuiButtonBase-root-MuiListItem-root.Mui-selected
    return(
        <ListItem
            sx={{ color : '#25344f'}}
            selected={isOn}
            onClick={change} 
            button
            >
            <ListItemIcon>
                {props.icon}
            </ListItemIcon>
            <ListItemText 
                sx={{
                    fontSize: 12,
                    ' .css-10hburv-MuiTypography-root' : {
                        fontSize : '.875rem'
                    },
                }}
                primary={props.title} 
            />
        </ListItem>
    )
}


export const MainListItems = (props) =>  {

    const [selectedIndex, setSelectedIndex] = React.useState(0);


    const handleListItemClick = (event, index) => {
        setSelectedIndex(index);
    };

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

    React.useEffect( () => {

        if(!props.AppBarVisible ){
            return setOpen(false)
        }

        if( SubMenuList.includes(selectedIndex) && !open ){
            if(props.AppBarVisible){
                console.log('yes show')
                return setOpen(false)
            }else{
                console.log('not show')
                return setOpen(true)
            }
        }

        if( !SubMenuList.includes(selectedIndex) && !props.AppBarVisible ){
            return setOpen(false)
        }
        

    }, [props, selectedIndex, open])

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

    return(
        <List>
            <ListSubheader inset>MENÚ</ListSubheader>
            <Item icon={<HomeIcon/>} index={0} selected={selectedIndex} change={handleListItemClick} title="Inicio" route="home" />
            <Item icon={<WorkIcon/>} index={1} selected={selectedIndex} change={handleListItemClick} title="Puestos" route="puestos" />
            <Item icon={<VisibilityOffIcon/>} selected={selectedIndex}  change={handleListItemClick} index={2} title="Contraseñas" route="contrasenas" />
            <Item icon={<PeopleAltIcon/>} selected={selectedIndex}  change={handleListItemClick} index={3} title="Expedientes" route="expedientes" />
            <Item icon={<EqualizerIcon/>} selected={selectedIndex}  change={handleListItemClick} index={4} title="Resultados" route="resultados" />
            {/* <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" /> */}

           <ListItem selected={ SubMenuList.includes(selectedIndex) } onClick={showPruebas}>
           {/* <ListItem selected={  SubMenuIndex.includes(selectedIndex) && !open } onClick={showPruebas}> */}
                <ListItemIcon>
                    <FingerprintIcon />
                </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>
                        
                    <SubMenuItem route="pruebas/crear" selected={selectedIndex} index={5} change={handleListItemClick} title="Crear Prueba" />
                    <SubMenuItem route="pruebas/listar" change={handleListItemClick} selected={selectedIndex} index={6} title="Listado de pruebas" />
                    <SubMenuItem route="pruebas/aplicar"  selected={selectedIndex} index={7} change={handleListItemClick} title="Aplicar" />
                    <SubMenuItem selected={selectedIndex} index={8} change={handleListItemClick} title="Respuestas" />
                    <SubMenuItem selected={selectedIndex} index={9} change={handleListItemClick} title="Calificaciones" />

                </List>
            </Collapse>

            <Item icon={<MiscellaneousServicesIcon/>} selected={selectedIndex}  change={handleListItemClick} index={10} title="Configuraciones" route="configuraciones" />
            <Item icon={<HistoryIcon/>} selected={selectedIndex}  change={handleListItemClick} index={11} title="Historial" route="historial" />
        </List>
    )
};

export const secondaryListItems = (
    <Nav>
        <ListSubheader inset>EXTRAS</ListSubheader>
        <Item selected={false} icon={<StarIcon/>} title="Elementos" route="/work" />
        <Item selected={false} icon={<OndemandVideoIcon/>} title="Tutoriales" route="/work" />
        <Item selected={false} icon={<SupportAgentIcon/>} title="Asistencia Técnica" route="/work" />
    </Nav>
);
