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

export 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>
    )
}
