import React, { useEffect, useState, useRef } from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import MuiDrawer from '@mui/material/Drawer';
import Box from '@mui/material/Box';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Badge from '@mui/material/Badge';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';

import MenuIcon from '@mui/icons-material/Menu';
import FullscreenIcon from '@mui/icons-material/Fullscreen';

import NotificationsIcon from '@mui/icons-material/Notifications';
import { MainListItems, secondaryListItems } from './listItems';

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';


import MailIcon from '@mui/icons-material/Mail';

import Logo from '../Images/logo.png';
import ProfilePicture from '../Images/man.png';

import useAuth from '../Auth/useAuth';
import { Outlet, useNavigate} from "react-router-dom";
import Footer from "../Components/Footer";


const drawerWidth = 240;

const AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open && {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    }),
}));

const useCheckMobileScreen = () => {
    const [width, setWidth] = useState(window.innerWidth);
    const handleWindowSizeChange = () => {
        let size = window.innerWidth;
        setWidth(size);
    }

    useEffect(() => {
        window.addEventListener('resize', handleWindowSizeChange);
        return () => {
            window.removeEventListener('resize', handleWindowSizeChange);
        }
    }, []);

    let isMobile = width <= 1000

    return (isMobile);
}

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
    ({ theme, open }) => ({
        '& .MuiDrawer-paper': {
            position: 'relative',
            whiteSpace: 'nowrap',
            width: drawerWidth,
            transition: theme.transitions.create('width', {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.enteringScreen,
            }),
            boxSizing: 'border-box',
            ...(!open && {
                overflowX: 'hidden',
                transition: theme.transitions.create('width', {
                    easing: theme.transitions.easing.sharp,
                    duration: theme.transitions.duration.leavingScreen,
                }),
                width: theme.spacing(7),
                [theme.breakpoints.up('sm')]: {
                    width: theme.spacing(9),
                },
            }),
        },
    }),
);

const mdTheme = createTheme();

function DashboardContent() {

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


    const toggleDrawer = () => setOpen(!open);
    const auth = useAuth();
    const navigate = useNavigate()

    const [anchorEl, setAnchorEl] = React.useState(null);
    const open_profile = Boolean(anchorEl);
    const handleClick = (event) => setAnchorEl(event.currentTarget);
    const handleClose = () => setAnchorEl(null)

    const [anchorElMovil, setAnchorElMov] = React.useState(null);
    const openMov = Boolean(anchorElMovil);
    const handleCloseMov = () => {
        setAnchorElMov(null);
    };

    const MenuResponsive = ()  => {
        setAnchorElMov(elRef.current);
    } 

    const CerrarSession = () => {
        console.log('cerrando session')
        auth.logout();
        navigate('/')
    } 

    return (
        <ThemeProvider theme={mdTheme}>
            <Box sx={{ display: 'flex' }}>
                <CssBaseline />
                <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={useCheckMobileScreen() ? false : open}>

                    <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >

                        <div ref={elRef}>
                            <IconButton 
                                edge="start" 
                                color="inherit" 
                                aria-label="open drawer" 
                                onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
                                sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
                                <MenuIcon  style={{
                                    background: '#ec5e69',
                                    fontSize: "40",
                                    color: "#fff"
                                }}/>
                            </IconButton>

                            <Menu
                                id="basic-menu"
                                anchorEl={anchorElMovil}
                                open={openMov}
                                onClose={handleCloseMov}
                                MenuListProps={{
                                    'aria-labelledby': 'basic-button',
                                }}>
                                <MenuItem onClick={ () => navigate('/perfil') }>Perfil</MenuItem>
                                <MenuItem onClick={handleCloseMov}>My account</MenuItem>
                                <MenuItem onClick={handleCloseMov}>Logout</MenuItem>
                            </Menu>

                        </div>

                        <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
                            {
                                !useCheckMobileScreen() && open ? (
                                    <React.Fragment>

                                        <IconButton onClick={toggleDrawer}>
                                            <MenuIcon />
                                        </IconButton>

                                        <IconButton onClick={ (event) =>  event.target.requestFullscreen() }>
                                            <FullscreenIcon style={{ paddinLeft : 15 }}/>
                                        </IconButton>


                                    </React.Fragment>
                                ) : undefined
                            }
                        </Typography>


                        <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
                            <IconButton size="large" aria-label="show 4 new mails" color="inherit">
                                <Badge badgeContent={4} color="error">
                                    <MailIcon style={{ color : '#212529' }} />
                                </Badge>
                            </IconButton>
                            <IconButton
                                size="large"
                                aria-label="show 17 new notifications"
                                color="inherit">
                                <Badge badgeContent={17} color="error">
                                    <NotificationsIcon style={{ color : '#212529' }}/>
                                </Badge>
                            </IconButton>


                            <IconButton
                                size="small"
                                edge="end"
                                aria-label="account of current user"
                                aria-haspopup="true"
                                aria-expanded={open_profile ? 'true' : undefined}
                                onClick={handleClick}
                                color="inherit"
                            >
                                <Avatar alt="Cindy Baker" src={ProfilePicture} />

                            </IconButton>
                            <Menu
                                id="basic-menu"
                                anchorEl={anchorEl}
                                open={open_profile}
                                onClose={handleClose}
                                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
                                <MenuItem onClick={() => navigate('perfil') }>Profile</MenuItem>
                                <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
                                <MenuItem onClick={CerrarSession}>Logout</MenuItem>
                            </Menu>

                        </Box>

                    </Toolbar>
                </AppBar>
                <Drawer variant="permanent" open={open}>
                    <Toolbar
                        sx={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'flex-start',
                            px: [1],

                        }} >

                        <div style={{ flat : 'righ' }} className="sidebar-header">
                            <div className="width_img">
                                <img src={Logo} alt="pruebas psicometricas"/>
                            </div>
                        </div>

                    </Toolbar>
                    <Divider />
                    <List>
                        <MainListItems 
                            AppBarVisible={open}  
                            setAppBarVisible={setOpen} 
                        />
                    </List>
                    <Divider />
                    <List>
                        {secondaryListItems}
                    </List>
                </Drawer>
                {/* <Box component="main" sx={{ backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', }} > */}
                    <Toolbar />
                    <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>
                        <Outlet/>
                        <Footer/>
                    </Container>
                {/* </Box> */}
            </Box>
        </ThemeProvider>
    );
}

export function Dashboard() {
    return <DashboardContent />;
}