//React helpers and API
import * as React from 'react';
import { useEffect, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { AuthContext } from '../helpers/AuthContext';
//Pages
//Material UI
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
//Custom Styles
import './styles/Navbar.css'
import logo from '../logo.svg';

const ResponsiveAppBar = () => {
    const [anchorElNav, setAnchorElNav] = React.useState(null);
    const [anchorElUser, setAnchorElUser] = React.useState(null);
    const divRef = React.useRef();
    const navigate = useNavigate();
    const { authState, setAuthState } = useContext(AuthContext);

    const handleOpenNavMenu = (event) => {
        setAnchorElNav(event.currentTarget);
    };
    const handleOpenUserMenu = (event) => {
        setAnchorElUser(event.currentTarget);
    };

    const handleCloseNavMenu = () => {
        setAnchorElNav(null);
    };

    const handleCloseUserMenu = () => {
        setAnchorElUser(null);
    };

    //Links
    const logout = () => {
        localStorage.clear();
        setAuthState({
            loggedIn: false
        });
        setAnchorElUser(null)
        navigate('/');
    };

    useEffect(() => {
        setAnchorElUser(divRef.current);
    }, [divRef]);

    const open = Boolean(anchorElUser);
    const menuId = open ? "menu-appbar" : undefined;

    useEffect(() => {
    }, [authState]);

    return (
        <div className='nav-bg shadow-sm hello-nav'>

            <div className='mobile-bar'></div>
            <Container maxWidth="xl">
                <Toolbar disableGutters>
                    <Button
                        className='rounded-circle'
                        sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
                        onClick={
                            () => {
                                navigate(`/`)
                            }
                        }
                    >
                        <img src={logo} className="logo" alt="logo" />
                    </Button>

                    <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                        <IconButton
                            size="large"
                            aria-label="account of current user"
                            aria-controls="menu-appbar"
                            aria-haspopup="true"
                            onClick={handleOpenNavMenu}
                            color="inherit"
                        >
                            <MenuIcon />
                        </IconButton>
                        <Menu
                            id="menu-appbar"
                            anchorEl={anchorElNav}
                            anchorOrigin={{
                                vertical: 'bottom',
                                horizontal: 'left',
                            }}
                            keepMounted
                            transformOrigin={{
                                vertical: 'top',
                                horizontal: 'left',
                            }}
                            open={Boolean(anchorElNav)}
                            onClose={handleCloseNavMenu}
                            sx={{
                                display: { xs: 'block', md: 'none' },
                            }}
                        >
                            <MenuItem
                                onClick={
                                    () => {
                                        navigate(`/`)
                                    }
                                }
                            >
                                <Typography textAlign="center">Home</Typography>
                            </MenuItem>

                            <MenuItem
                                onClick={
                                    () => {
                                        navigate(`/pricing`)
                                    }
                                }
                            >
                                <Typography textAlign="center">Pricing</Typography>
                            </MenuItem>

                            <MenuItem
                                onClick={
                                    () => {
                                        navigate(`/map`)
                                    }
                                }
                            >
                                <Typography textAlign="center">Map</Typography>
                            </MenuItem>

                        </Menu>

                    </Box>

                    <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>

                        <Button
                            onClick={
                                () => {
                                    navigate(`/pricing`)
                                }
                            }
                            sx={{ my: 2, color: 'white', display: 'block' }}
                        >
                            Pricing
                        </Button>

                        <Button
                            onClick={
                                () => {
                                    navigate(`/map`)
                                }
                            }
                            sx={{ my: 2, color: 'white', display: 'block' }}
                        >
                            Map
                        </Button>

                    </Box>

                    <Box sx={{ flexGrow: 0 }}>
                        {authState && !authState.loggedIn ? (
                            <>
                                <Button
                                    onClick={
                                        () => {
                                            navigate(`/login`)
                                        }
                                    }
                                    sx={{ my: 2, color: 'white', display: 'block' }}
                                >
                                    Login
                                </Button>
                            </>
                        ) : (
                            <>
                                <Tooltip title="Open settings">
                                    <IconButton
                                        onClick={handleOpenUserMenu}
                                        ref={divRef}
                                        aria-describedby={menuId}
                                        sx={{ p: 0 }}>
                                        <Avatar alt="Stock User" src="https://lendingcircle.s3.amazonaws.com/default-profile-pic.png" />
                                    </IconButton>
                                </Tooltip>

                                {authState.roles && authState.roles.includes('ADMIN') ? (
                                    <>
                                        <Menu
                                            sx={{ mt: '45px' }}
                                            id={menuId}
                                            open={open}
                                            anchorEl={anchorElUser}
                                            onClose={handleCloseUserMenu}
                                            anchorOrigin={{
                                                vertical: 'top',
                                                horizontal: 'right',
                                            }}
                                            keepMounted
                                            transformOrigin={{
                                                vertical: 'top',
                                                horizontal: 'right',
                                            }}
                                        >
                                            <MenuItem className='mx-3 my-2' >
                                                Hello: {authState.username}
                                            </MenuItem>

                                            <Divider color="text.secondary" className="mt-3 mb-3"><Chip label="User Menu" /></Divider>
                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/profile`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Edit Profile</Typography>
                                            </MenuItem>

                                            <Divider color="text.secondary" className="mt-3 mb3"><Chip label="Admin" /></Divider>
                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Admin Console</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/users`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">User List</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/reports`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Reports List</Typography>
                                            </MenuItem>


                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/bikes`)
                                                    }
                                                }
                                            >

                                                <Typography textAlign="center">Bike List</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/bikes/maintenance`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Maintenance List</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/bikes/maintenance/history`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Maintenance History</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/rentals`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Rental List</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/promos`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Promo List</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/admin/stations`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Station List</Typography>
                                            </MenuItem>

                                            <Divider color="text.secondary" className="mt-3 mb3"></Divider>
                                            <MenuItem onClick={logout}>
                                                <Typography textAlign="center">Logout</Typography>
                                            </MenuItem>
                                        </Menu>
                                    </>
                                ) : (
                                    <>
                                        <Menu
                                            sx={{ mt: '45px' }}
                                            id={menuId}
                                            open={open}
                                            anchorEl={anchorElUser}
                                            onClose={handleCloseUserMenu}
                                            anchorOrigin={{
                                                vertical: 'top',
                                                horizontal: 'right',
                                            }}
                                            keepMounted
                                            transformOrigin={{
                                                vertical: 'top',
                                                horizontal: 'right',
                                            }}
                                        >
                                            <MenuItem className='mx-3 my-2' >
                                                Hello: {authState.username}
                                            </MenuItem>
                                            <Divider color="text.secondary" className="mt-3 mb-3"><Chip label="User Menu" /></Divider>
                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/account`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Dashboard</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/dashboard/history`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Rental History</Typography>
                                            </MenuItem>

                                            <MenuItem onClick={
                                                () => {
                                                    navigate(`/reports`)
                                                }
                                            }
                                            >
                                                <Typography textAlign="center">Report</Typography>
                                            </MenuItem>

                                            <MenuItem
                                                onClick={
                                                    () => {
                                                        navigate(`/stations/list`)
                                                    }
                                                }
                                            >
                                                <Typography textAlign="center">Station List</Typography>
                                            </MenuItem>

                                            <Divider color="text.secondary" className="mt-3 mb3"></Divider>
                                            <MenuItem onClick={logout}>
                                                <Typography textAlign="center">Logout</Typography>
                                            </MenuItem>
                                        </Menu>
                                    </>
                                )
                                }
                            </>
                        )}
                    </Box>
                </Toolbar>
            </Container>
        </div>
    );
};
export default ResponsiveAppBar;
