import React from 'react';
import {
    Box, Badge, IconButton, Menu, Avatar, MenuItem
} from '@mui/material'

import {
    Mail as MailIcon, Notifications as NotificationsIcon,
} from '@mui/icons-material'

import useAuth from '../../Auth/useAuth.js';
import { useNavigate } from "react-router-dom";
import ProfilePicture from '../../Images/man.png';

export function UserOptions(){

    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) => setAnchorEl(event.currentTarget);
    const handleClose = () => setAnchorEl(null)

    return(
        <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="profile picture" src={ProfilePicture} />
            </IconButton>
            <Menu
                id="basic-menu"
                anchorEl={anchorEl}
                pen={open_profile}
                onClose={handleClose}
                MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
                <MenuItem onClick={() => navigate('dashboard/perfil')}>Mi Cuenta</MenuItem>
                <MenuItem onClick={() => console.log('dashboard/perfil')}>Configuraciones</MenuItem>
                <MenuItem onClick={CerrarSession}>Cerrar Sesión</MenuItem>
            </Menu>
        </Box>
    )
}