import React from 'react';
import { observer } from 'mobx-react';
import Pages from './Pages';
import { Link } from 'react-router-dom';
import AccountManager from '../container/AccountManager';
import {
  Settings as SettingsIcon,
  Check as CheckIcon,
  Lock as LockIcon,
  CloudDownload as CloudDownloadIcon,
  Web as WebIcon,
  Menu as MenuIcon,
  Timer as TimerIcon
} from '@material-ui/icons';
import {
  Icon,
  IconButton,
  Menu,
  List,
  ListItem,
  ListItemText,
  ListSubheader,
  Divider,
  Typography
} from '@material-ui/core';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';

interface Props {
  accountManager: AccountManager;
}

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    menuIcon: { color: 'green', marginRight: '0.2rem' }
  })
);

const MoreMenu = observer((props: Props) => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const classes = useStyles();

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setTimeout(() => {
      setAnchorEl(null);
    }, 200);
  };

  return (
    <div>
      <IconButton
        edge="end"
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
        style={{ color: '#C4C4C4' }}
      >
        <MenuIcon />
      </IconButton>
      <Menu
        id={'simple-menu'}
        anchorEl={anchorEl}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <List
          aria-labelledby="nested-list-subheader"
          subheader={
            <ListSubheader component="div" id="nested-list-subheader">
              {props.accountManager.userAccounts.length > 0
                ? 'Accounts'
                : 'No Account'}
            </ListSubheader>
          }
        >
          {props.accountManager.userAccounts.map((account, i) => {
            return (
              <ListItem
                key={i}
                button
                dense={true}
                onClick={() => {
                  props.accountManager.switchToAccount(account.alias);
                  handleClose();
                }}
              >
                {account.alias ===
                props.accountManager.activeUserAccount?.alias ? (
                  <CheckIcon fontSize={'small'} />
                ) : (
                  <Icon className={'fa fa-fw'} fontSize={'small'} />
                )}
                <ListItemText primary={account.alias} />
              </ListItem>
            );
          })}
          <Divider light />
          {props.accountManager.userAccounts.length > 0 && (
            <ListItem
              dense={true}
              component={Link}
              to={Pages.AccountManagement}
              button
              onClick={handleClose}
            >
              <SettingsIcon className={classes.menuIcon} />
              <ListItemText primary="Key Management" />
            </ListItem>
          )}
          <ListItem
            dense={true}
            component={Link}
            to={Pages.ConnectedSites}
            button
            onClick={handleClose}
          >
            <WebIcon className={classes.menuIcon} />
            <ListItemText primary="Connected Sites" />
          </ListItem>
          {props.accountManager.activeUserAccount && (
            <ListItem
              dense={true}
              button
              onClick={() => {
                props.accountManager.downloadActiveKey();
                handleClose();
              }}
            >
              <CloudDownloadIcon className={classes.menuIcon} />
              <ListItemText primary="Download Active Key" />
            </ListItem>
          )}
          <ListItem
            dense={true}
            component={Link}
            to={Pages.ConfigureTimeout}
            button
            onClick={handleClose}
          >
            <TimerIcon className={classes.menuIcon} />
            <ListItemText primary="Timeout" />
            <Typography variant="overline">
              {props.accountManager.idleTimeoutMins} min
              {props.accountManager.idleTimeoutMins === 1 ? '' : 's'}
            </Typography>
          </ListItem>
          <ListItem
            dense={true}
            button
            onClick={() => {
              props.accountManager.lock();
              handleClose();
            }}
          >
            <LockIcon className={classes.menuIcon} />
            <ListItemText primary="Lock" />
          </ListItem>
        </List>
      </Menu>
    </div>
  );
});

export default MoreMenu;