import React, { useState } from "react";
import {
  IconButton,
  Menu,
  MenuItem,
  Typography,
  ListItemIcon
} from "@material-ui/core";
import AccountCircle from "@material-ui/icons/AccountCircle";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
import AccountBoxIcon from "@material-ui/icons/AccountBox";
import SettingsIcon from "@material-ui/icons/Settings";
import { useHistory } from "react-router-dom";
import { useTuitioClient } from "@flare/tuitio-client-react";
import { useToast } from "../../hooks";
import styles from "./styles";
import { makeStyles } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";

const useStyles = makeStyles(styles);

const ProfileButton = () => {
  const history = useHistory();
  const { error } = useToast();
  const classes = useStyles();
  const { t } = useTranslation();

  const { logout } = useTuitioClient({
    onLogoutFailed: errorMessage => error(errorMessage),
    onLogoutError: err => error(err.message)
  });

  const [anchorEl, setAnchorEl] = useState(null);
  const openUserMenu = Boolean(anchorEl);

  const handleMenu = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <IconButton
        aria-label="account of current user"
        aria-controls="menu-appbar"
        aria-haspopup="true"
        onClick={handleMenu}
        color="inherit"
      >
        <AccountCircle />
      </IconButton>
      <Menu
        id="menu-appbar"
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: "top",
          horizontal: "right"
        }}
        keepMounted
        transformOrigin={{
          vertical: "top",
          horizontal: "right"
        }}
        open={openUserMenu}
        onClose={handleClose}
      >
        <MenuItem
          onClick={() => {
            history.push("/user-profile");
            handleClose();
          }}
        >
          <ListItemIcon className={classes.menuItemIcon}>
            <AccountBoxIcon fontSize="small" />
          </ListItemIcon>
          <Typography variant="inherit">{t("User.Profile.Label")}</Typography>
        </MenuItem>
        <MenuItem
          onClick={() => {
            history.push("/settings");
            handleClose();
          }}
        >
          <ListItemIcon className={classes.menuItemIcon}>
            <SettingsIcon fontSize="small" />
          </ListItemIcon>
          <Typography variant="inherit">{t("User.Settings")}</Typography>
        </MenuItem>
        <MenuItem onClick={logout}>
          <ListItemIcon className={classes.menuItemIcon}>
            <ExitToAppIcon fontSize="small" />
          </ListItemIcon>
          <Typography variant="inherit">{t("User.Logout")}</Typography>
        </MenuItem>
      </Menu>
    </div>
  );
};

export default ProfileButton;