/**
 * @file Header.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import {AppBar, Box, IconButton, Menu, MenuItem, Toolbar, Typography} from "@mui/material";
import AccountCircle from '@mui/icons-material/AccountCircle';
import MenuIcon from '@mui/icons-material/Menu';
import {useNavigate} from "react-router-dom";
import {useState} from "react";
import {useAuth} from "../services/AuthMiddleware";

function Header(props) {
    const [profileMenuAnchor, setProfileMenuAnchor] = useState();
    const [navMenuAnchor, setNavMenuAnchor] = useState();
    const navigate = useNavigate();
    const auth = useAuth();

    const isLogged = auth.user && auth.user.id !== null;

    const pages = [];

    if (isLogged) {
        pages.push({label: "Přednastavení", link: '/presets'},);
        pages.push({label: "Zařízení", link: '/devices'});
    }

    const openProfileMenu = (event) => {
        setProfileMenuAnchor(event.currentTarget);
    };

    const closeProfileMenu = () => {
        setProfileMenuAnchor(null);
    };

    const openNavMenu = (event) => {
        setNavMenuAnchor(event.currentTarget);
    };

    const closeNavMenu = () => {
        setNavMenuAnchor(null);
    };

    return (
        <AppBar position={"sticky"}>
            <Toolbar>
            {/* Small menu */}
                <Box sx={{display: {xs: "flex", sm: "none"}, flexDirection: "right", flexGrow: 1}}>
                    <IconButton size="large" onClick={openNavMenu} color="inherit">
                        <MenuIcon/>
                    </IconButton>

                    <Menu anchorEl={navMenuAnchor}
                          anchorOrigin={{
                              vertical: 'bottom',
                              horizontal: 'right',
                          }}
                          keepMounted
                          transformOrigin={{
                              vertical: 'top',
                              horizontal: 'right',
                          }}
                          open={Boolean(navMenuAnchor)}
                          onClose={closeNavMenu}
                          onClick={closeNavMenu}
                    >
                        {pages.map((page) =>(
                            <MenuItem key={page.link} onClick={() => navigate(page.link)} >
                                {page.label}
                            </MenuItem>
                        ))}

                    </Menu>
                </Box>
                <Typography sx={{display: {xs: "flex", sm: "none"}, flexGrow: 1}}
                            variant="h5" fontWeight="bold"
                            onClick={() => navigate("/")}
                >
                    Flowerpot
                </Typography>

            {/* Big menu */}
                <Typography sx={{display: {xs: "none", sm: "flex"}}}
                            variant="h5" fontWeight="bold"
                            marginRight={5} onClick={() => navigate("/")}
                >
                    Flowerpot
                </Typography>
                <Box sx={{display: {xs: "none", sm: "flex"}, flexDirection: "right", flexGrow: 1}}>
                    {pages.map((page) =>(
                        <MenuItem key={page.link} onClick={() => navigate(page.link)} >
                            {page.label}
                        </MenuItem>
                    ))}
                </Box>

            {/* Profile menu */}
                <div>
                    <IconButton size="large" onClick={openProfileMenu} color="inherit">
                        <AccountCircle/>
                    </IconButton>
                    <Menu anchorEl={profileMenuAnchor}
                        anchorOrigin={{
                            vertical: 'bottom',
                            horizontal: 'right',
                        }}
                        keepMounted
                        transformOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        open={Boolean(profileMenuAnchor)}
                        onClose={closeProfileMenu}
                        onClick={closeProfileMenu}
                    >
                        {isLogged ? <div>
                                        <MenuItem onClick={() => navigate("/profile")}>Můj Profil</MenuItem>
                                        <MenuItem onClick={() => auth.logout(() => navigate("/"))}>Odhlásit se</MenuItem>
                                    </div>
                                    :
                                    <MenuItem onClick={() => navigate("/login")}>Přihlásit se</MenuItem>
                        }

                    </Menu>
                </div>
            </Toolbar>
        </AppBar>
    );
}


export default Header;