import React from 'react';
import { ThemeProvider, styled, createTheme } from '@mui/material/styles';

import {
    Container, IconButton, Divider,
    Typography, List, Toolbar,useMediaQuery as Size,
    Box, Badge, Menu, Avatar, MenuItem
} from '@mui/material'

import {
    Fullscreen as FullscreenIcon,
    Menu as MenuIcon,
    KeyboardDoubleArrowLeft as LeftKey,
    Mail as MailIcon, Notifications as NotificationsIcon,
} from '@mui/icons-material'

import Logo from '../Images/evaluacion.jpeg';

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

import { Drawer as MuiDrawer, AppBar as MuiAppBar } from "../Components/Navigation/AppBar"
import { MainListItems, SecondaryListItems } from '../Components/Navigation/listItems';
import useAuth from '../Auth/useAuth.js'
import ProfilePicture from '../Images/man.png';

const drawerWidth = 240;
const mdTheme = createTheme();

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 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),
                },
            }),
        },
    }),
);


function DashboardContent() {

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

    const isMovil = Size('(min-width:770px)');
    const auth = useAuth();
    const navigate = useNavigate()

    const CerrarSession = () => {
        auth.logout();
        navigate('/')
    }

    const [anchorEl, setAnchorEl] = React.useState(null);
    const open_profile = Boolean(anchorEl);
    const handleClick = (event) => {
        console.log('handle click')
        console.log(event)
        setAnchorEl(event.currentTarget);
    }
    const handleClose = () => setAnchorEl(null)

    const toggleDrawer = () => {
        setOpen(!open);
    }

    const [anchorElMovil, setAnchorElMov] = React.useState(false);
    const MenuResponsive = () => {
        console.log(anchorElMovil)
        setAnchorElMov(!anchorElMovil);
    }


    return (
        <ThemeProvider theme={mdTheme}>

            <MenuMovil anchor={anchorElMovil} control={setAnchorElMov} />

            <Box sx={{ display: 'flex' }}>
                <AppBar style={{ backgroundColor: '#fff', boxShadow: 'None' }} position="absolute" open={open}>
                    <Toolbar sx={{ pr: '24px', borderBottom: "1px solid #ec5e69" }} >
                        <IconButton
                            edge="start"
                            color="inherit"
                            aria-label="open drawer"
                            onClick={toggleDrawer}
                            sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
                            <MenuIcon style={{
                                background: '#ec5e69',
                                fontSize: "40",
                                color: "#fff"
                            }} />
                        </IconButton>
                        <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >
                            {
                                open ? (
                                    <React.Fragment>

                                        <IconButton onClick={toggleDrawer}>
                                            <LeftKey/>
                                        </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('dashboard/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>
                <Container maxWidth="lg" sx={{ mt: 2, mb: 2 }}>
                    <Outlet />
                    <Footer />
                </Container>
            </Box>
        </ThemeProvider>
    );
}

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