import React from "react";
import { AppBar, Toolbar, IconButton, Box, Menu, MenuItem, ListItemIcon, Typography } from "@mui/material";
import { Menu as MenuIcon, MenuOpen, Logout } from '@mui/icons-material/';
import PropTypes from "prop-types";
import Logo from "../assets/svg/logo.svg";
import Profile from "../assets/svg/profile.svg";
import { useUser } from "../context/UserContext.js";
import "./CustomAppBar.css"; 

export default function CustomAppBar({ open, handleDrawerToggle, handleLogout }){
  const { user } = useUser();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const isOpen = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <AppBar
      position="fixed"
      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
      className="header-background"
    >
      <Toolbar className="app-toolbar">
        <div className="icon-section">
          <IconButton
            data-testid="drawer-menu"
            color="inherit"
            aria-label="toggle drawer"
            onClick={handleDrawerToggle}
          >
            {open ? (
              <MenuOpen data-testid="open-menu" />
            ) : (
              <MenuIcon data-testid="close-menu" />
            )}
          </IconButton>
          <Box style={{ margin: "0 15px" }}>
            <Logo />
          </Box>
        </div>
        <Box className="profile-section">
          <Typography>{`${user?.user_first_name} ${user?.user_last_name}`}</Typography>
          <Profile 
            onClick={handleClick}
            size="small"
            sx={{ ml: 2 }}
            style={{ cursor: "pointer" }}
            aria-controls={isOpen ? "account-menu" : undefined}
            aria-haspopup="true"
            aria-expanded={isOpen ? "true" : undefined} 
          /> 
          <Menu
            anchorEl={anchorEl}
            id="account-menu"
            open={isOpen}
            onClose={handleClose}
            onClick={handleClose}
            slotProps={{
              paper: {
                elevation: 0,
                sx: {
                  overflow: "visible",
                  filter: "drop-shadow(0px 2px 8px #rgba(0,0,0,0.32))",
                  mt: 1.5,
                  "& .MuiAvatar-root": {
                    width: 32,
                    height: 32,
                    ml: -0.5,
                    mr: 1,
                  },
                  "&::before": {
                    content: '""',
                    display: "block",
                    position: "absolute",
                    top: 0,
                    right: 14,
                    width: 10,
                    height: 10,
                    bgcolor: "background.paper",
                    transform: "translateY(-50%) rotate(45deg)",
                    zIndex: 0,
                  },
                },
              },
            }}
            transformOrigin={{ horizontal: "right", vertical: "top" }}
            anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
          >
            <MenuItem onClick={handleLogout}>
              <ListItemIcon>
                <Logout fontSize="small" />
              </ListItemIcon>
              Logout
            </MenuItem>
          </Menu>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

CustomAppBar.propTypes = {
  open: PropTypes.bool.isRequired,
  handleDrawerToggle: PropTypes.func,
  handleLogout: PropTypes.func,
};
