import DarkModeOutlined from "@mui/icons-material/DarkModeOutlined";
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
import HubIcon from '@mui/icons-material/Hub';
import { Button, Menu, MenuItem } from "@mui/material";
import AppBar from "@mui/material/AppBar";
import Avatar from "@mui/material/Avatar";
import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import React, { useContext } from "react";
import { Link } from "react-router";
import { useGetIdentity } from "@refinedev/core";
import { HamburgerMenu, RefineThemedLayoutV2HeaderProps } from "@refinedev/mui";
import { ColorModeContext } from "../../contexts/color-mode";
import { FirmContext } from "../../contexts/FirmContext";
import { Logout } from "../auth/Logout";
import { IUser } from "../../interfaces";

export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
  sticky = true,
}) => {
  const { mode, setMode } = useContext(ColorModeContext);
  const { currentFirm } = useContext(FirmContext);

  const { data: user } = useGetIdentity<IUser>();

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const openUserMenu = Boolean(anchorEl);
  const handleOpenUserMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  }
  const handleCloseUserMenu = () => {
    setAnchorEl(null);
  };

  return (
    <AppBar position={sticky ? "sticky" : "relative"}>
      <Toolbar>
        <Stack
          direction="row"
          width="100%"
          justifyContent="space-between"
          alignItems="center"
        >
          <HamburgerMenu />
          {currentFirm && (
            <Link to={`/firm/${currentFirm.instance}/${currentFirm.firm}`} ><Typography variant="h4" >{currentFirm.instance}&nbsp;/&nbsp;{currentFirm.firm}</Typography></Link>
          )}
          {!currentFirm && (
            <Link to="/" ><Typography variant="h4">Roleplay&nbsp;Contracts</Typography></Link>
          )}
          {(user?.email) && (
            <Link to="/hub"><HubIcon /></Link>
          )}
          <Stack
            direction="row"
            justifyContent="flex-end"
            alignItems="center"
          >
            {(user?.email) && (
              <Stack
                direction="row"
                gap="16px"
                alignItems="center"
                justifyContent="center"
              >
                <Button
                  id="user-menu-button"
                  aria-controls={openUserMenu ? 'user-menu' : undefined}
                  aria-haspopup="true"
                  aria-expanded={openUserMenu ? 'true' : undefined}
                  onClick={handleOpenUserMenu}>
                  <Typography
                    sx={{
                      display: {
                        xs: "none",
                        sm: "inline-block",
                      },
                    }}
                    variant="subtitle2"
                  >
                    {user?.email}
                  </Typography>&nbsp;
                  <Avatar src={"user?.avatar"} alt={user?.email} />
                </Button>
                <Menu
                  id="user-menu"
                  anchorEl={anchorEl}
                  open={openUserMenu}
                  onClose={handleCloseUserMenu}
                  MenuListProps={{
                    'aria-labelledby': 'user-menu-button',
                  }}
                >
                  <MenuItem onClick={handleCloseUserMenu}><Logout /></MenuItem>
                  <MenuItem onClick={setMode}>
                    <IconButton color="inherit">
                      {mode === "dark" ? <LightModeOutlined /> : <DarkModeOutlined />}
                    </IconButton>
                  </MenuItem>
                </Menu>
              </Stack>
            )}
            {!user && (
              <Link to="/auth/login"><Button>Login</Button></Link>
            )}

          </Stack>
        </Stack>
      </Toolbar>
    </AppBar>
  );
};