import { mdiApi, mdiCash } from "@mdi/js";
import Icon from "@mdi/react";
import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
import LogoutIcon from "@mui/icons-material/Logout";
import SettingsIcon from "@mui/icons-material/Settings";
import { Button, Divider, ListItemIcon, ListItemText } from "@mui/material";
import AppBar from "@mui/material/AppBar";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import * as React from "react";
import { useAuthInfo } from "./BaseAuthenticatedPage";
import { DarkThemeButton } from "./DarkThemeButtonWidget";
import { PublicModeButton } from "./PublicModeButtonWidget";
import { RouterLink } from "./RouterLink";

export function MoneyWebAppBar(p: {
  onSignOut: () => void;
}): React.ReactElement {
  const authInfo = useAuthInfo();

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

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

  const signOut = () => {
    handleCloseMenu();
    p.onSignOut();
  };

  return (
    <AppBar position="sticky">
      <Toolbar>
        <Icon path={mdiCash} size={1} style={{ marginRight: "1rem" }} />

        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          <RouterLink to="/">Money Manager</RouterLink>
        </Typography>

        <div>
          <PublicModeButton />
          <DarkThemeButton />

          <Button size="large" color="inherit">
            {authInfo.info.name}
          </Button>

          <Button
            size="large"
            aria-label="account of current user"
            aria-controls="menu-appbar"
            aria-haspopup="true"
            onClick={handleMenu}
            color="inherit"
          >
            <SettingsIcon />
          </Button>
          <Menu
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: "bottom",
              horizontal: "right",
            }}
            keepMounted
            transformOrigin={{
              vertical: "top",
              horizontal: "right",
            }}
            open={Boolean(anchorEl)}
            onClose={handleCloseMenu}
          >
            {/* API tokens */}
            <RouterLink to={"/tokens"}>
              <MenuItem>
                <ListItemIcon>
                  <Icon path={mdiApi} size={1} />
                </ListItemIcon>
                <ListItemText secondary="Manage programmatic access to your account">
                  API Tokens
                </ListItemText>
              </MenuItem>
            </RouterLink>

            {/* Backup */}
            <RouterLink to={"/backup"}>
              <MenuItem>
                <ListItemIcon>
                  <CloudDownloadIcon />
                </ListItemIcon>
                <ListItemText secondary="Backup and restore your data">
                  Backup
                </ListItemText>
              </MenuItem>
            </RouterLink>

            <Divider />

            {/* Sign out */}
            <MenuItem onClick={signOut}>
              <ListItemIcon>
                <LogoutIcon />
              </ListItemIcon>
              <ListItemText secondary="End your session">Sign out</ListItemText>
            </MenuItem>
          </Menu>
        </div>
      </Toolbar>
    </AppBar>
  );
}