import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import React from "react";
import { useAuthStore } from "../../stores/authStore";

export default function Header({
  handleDrawerToggle,
}: {
  handleDrawerToggle: () => void;
}) {
  const { user, logout } = useAuthStore();
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  
  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };

  const onLogout = async () => {
    setAnchorEl(null);

    await logout();
  };

  return (
    <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
      <Box component="div">
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="start"
          onClick={handleDrawerToggle}
          sx={{ mr: 2, display: { sm: "none" } }}
        >
          <MenuIcon />
        </IconButton>
      </Box>
      <Box component="div">
        <Box
          component="div"
          onClick={handleClick}
          sx={{
            display: "flex",
            alignItems: "center",
            cursor: "pointer",
            gap: 1,
            padding: "8px",
            borderRadius: 1,
            '&:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.04)'
            }
          }}
        >
          <Typography variant="subtitle1" noWrap component="div">
            Hi, {user?.name || ''}
          </Typography>
        </Box>
        <Menu
          id="basic-menu"
          anchorEl={anchorEl}
          open={open}
          onClose={handleClose}
          MenuListProps={{
            "aria-labelledby": "basic-button",
          }}
          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        >
          <MenuItem onClick={handleClose} sx={{ minWidth: '200px' }}>
            <Typography>Profile</Typography>
          </MenuItem>
          <MenuItem onClick={handleClose}>
            <Typography>My Account</Typography>
          </MenuItem>
          <MenuItem onClick={onLogout} sx={{ color: 'error.main' }}>
            <Typography>Logout</Typography>
          </MenuItem>
        </Menu>
      </Box>
    </Toolbar>
  );
}