frontend/src/user/UserMenu.tsx

import { Avatar, Box, Button, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, PaletteColor, Theme, useTheme } from "@mui/material";
import { useGlobalState } from "../providers/StateContainer";
import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
import { makeStyles } from "@mui/styles";
import { LockOpen, Person, Lock, Settings, SupervisedUserCircle as TeamIcon } from "@mui/icons-material";
import { useState } from "react";
import UserTeamName from "./UserTeamName";
import React from "react";
import ThemeIcon from "../common/ThemeIcon";
import { useAuth0 } from "@auth0/auth0-react";
import UserSettings from "./UserSettings";
import UserAvatar from "./UserAvatar";
import { purple } from "@mui/material/colors";

const useStyles = makeStyles((theme: Theme) => ({
  userAvatar: {
    color: "#fff",
    backgroundColor: getSecondaryColour()["700" as keyof PaletteColor],
    [theme.breakpoints.down("xs")]: {
      width: "32px",
      height: "32px"
    }
  },
  userAvatar2: {
    color: "#fff",
    backgroundColor: theme.palette.secondary["700" as keyof PaletteColor],
    [theme.breakpoints.down("xs")]: {
      width: "30px",
      height: "30px"
    },
    position: "relative",
    top: -6,
    left: 0
  },
  teamAvatar: {
    color: "#fff",
    backgroundColor: theme.palette.secondary["700" as keyof PaletteColor],
    [theme.breakpoints.down("xs")]: {
      width: "30px",
      height: "30px"
    },
    position: "absolute",
    top: -34,
    left: 8
  },
  profileButton: {
    maxWidth: "50vw"
  },
  profileName: {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    textTransform: "capitalize",
    color: getSignatureAccentColour(),
    marginBottom: -3,
    marginTop: -3
  },
  red: {
    color: "var(--status-alert)"
  },
  rightIcon: {
    marginLeft: theme.spacing(1)
  },
  signIn: {
    color: getSignatureAccentColour(),
    borderColor: getSignatureAccentColour()
  },
}));

interface Props {
  toggleTheme: () => void;
}
  
export default function UserMenu(props: Props) {

  const { toggleTheme } = props;
  const [{ user, team, as }] = useGlobalState();
  const { loginWithRedirect } = useAuth0();
  const classes = useStyles();
  const theme = useTheme();

  const name = user.name();
  const picture = user.settings.avatar;
  const [lockIsHovered, setLockIsHovered] = useState<boolean>(false);
  const [userMenuIsOpen, setUserMenuIsOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState<any>(null);
  const [userSettingsIsOpen, setUserSettingsIsOpen] = useState<boolean>(false);
  // const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
  // const allowedToCopyToken = user.allowedTo("copy-token");
  const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;

  const lockHover = () => {
    setLockIsHovered(true);
  };

  const lockNoHover = () => {
    setLockIsHovered(false);
  };

  const handleLogin = () => {
    loginWithRedirect()
  }

  const openUserMenu = (event: any) => {
    setAnchorEl(event.currentTarget);
    setUserMenuIsOpen(true);
  };

  const closeUserMenu = () => {
    setUserMenuIsOpen(false);
    setAnchorEl(null);
  };

  const openUserSettingsDialog = () => {
    setUserMenuIsOpen(false);
    setAnchorEl(null);
    setUserSettingsIsOpen(true)
  }
  
  const closeUserSettingsDialog = () => {
    setUserSettingsIsOpen(false)
  }

  const unauthenticatedUserMenu = () => {
    return (
      <React.Fragment>
        <Button
          variant="outlined"
          aria-label="Sign In"
          onClick={handleLogin}
          onMouseEnter={lockHover}
          onMouseLeave={lockNoHover}
          size="small"
          className={classes.signIn}>
          Sign In
          {lockIsHovered ? (
            <LockOpen className={classes.rightIcon} fontSize="small" />
          ) : (
            <Lock className={classes.rightIcon} fontSize="small" />
          )}
        </Button>

        <IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
          <ThemeIcon />
        </IconButton>
      </React.Fragment>
    );
  };

  if (user.id().length < 1) return unauthenticatedUserMenu()

  return (
    <>
      <Button
        id="tour-user-menu"
        aria-owns={userMenuIsOpen ? "userMenu" : undefined}
        aria-haspopup="true"
        onClick={openUserMenu}
        className={classes.profileButton}>
        <Box style={{ display: "flex", flexDirection: "column" }}>
          <UserTeamName user={user} team={team} />
        </Box>
        <Box style={{ marginLeft: theme.spacing(1) }}>
          {picture && hasTeams && team.id().length > 0 ? (
            <div>
              <UserAvatar
                user={user}
                className={classes.userAvatar2}
                style={{ zIndex: as === "" ? 1000 : 0 }}
              />
              <div style={{ position: "relative" }}>
                <Avatar
                  src={team.settings.avatar}
                  className={classes.teamAvatar}
                  style={{ background: purple[500] }}>
                  <TeamIcon style={{ fontSize: 38 }} />
                </Avatar>
              </div>
            </div>
          ) : picture ? (
            <Avatar alt={name} src={picture} className={classes.userAvatar}>
              {!picture && name}
            </Avatar>
          ) : (
            <Avatar alt={name} src={picture} className={classes.userAvatar}>
              <Person />
            </Avatar>
          )}
        </Box>
      </Button>
      <IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
        <ThemeIcon />
      </IconButton>
      <Menu
        id="userMenu"
        anchorEl={anchorEl}
        open={userMenuIsOpen}
        onClose={closeUserMenu}
        disableAutoFocusItem>
        <MenuItem onClick={openUserSettingsDialog} aria-label="Open User Settings" dense>
          <ListItemIcon>
            <Settings />
          </ListItemIcon>
          <ListItemText primary="User Settings" />
        </MenuItem>
      </Menu>
      <UserSettings isOpen={userSettingsIsOpen} closeDialogCallback={closeUserSettingsDialog} />
    </>
  )
}