import React, { useEffect, useState, useRef } from 'react';
import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
import useAuth from '../Auth/useAuth';
import { Outlet, useNavigate} from "react-router-dom";

import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Menu from '@mui/material/Menu';
// import Container from '@mui/material/Container';
import Badge from '@mui/material/Badge';
import Avatar from '@mui/material/Avatar';
import FullscreenIcon from '@mui/icons-material/Fullscreen';

import MenuItem from '@mui/material/MenuItem';
import MailIcon from '@mui/icons-material/Mail';
import ProfilePicture from '../Images/man.png';
import MuiAppBar from '@mui/material/AppBar';
import NotificationsIcon from '@mui/icons-material/Notifications';
import Toolbar from '@mui/material/Toolbar';
import Box from '@mui/material/Box';

const drawerWidth = 240;

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 AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
    transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open && {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: `${drawerWidth}px`,
        transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
    }),
}));

export default function AppBarComponent (){

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


    const auth = useAuth();
    const navigate = useNavigate()
    const [anchorEl, setAnchorEl] = React.useState(null);

    const [anchorElMovil, setAnchorElMov] = React.useState(null);

    const toggleDrawer = () => setOpen(!open);
    const open_profile = Boolean(anchorEl);
    const handleClick = (event) => setAnchorEl(event.currentTarget);
    const handleClose = () => setAnchorEl(null)
    const openMov = Boolean(anchorElMovil);
    const handleCloseMov = () => {
        setAnchorElMov(null);
    };

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

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

    return(
        <AppBar 
            style={{ backgroundColor : '#fff', boxShadow : 'None' }} 
            position="fixed" 
            open={useCheckMobileScreen() ? false : open} >

            <Toolbar sx={{ 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>
    )
}