import { AppBar, Drawer, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import ListIcon from "@mui/icons-material/List";
import PeopleIcon from "@mui/icons-material/People";
import Videocam from "@mui/icons-material/Videocam";
import * as api from "../api";

import MoonfireMenu from "../AppMenu";
import { useReducer } from "react";
import { LoginState } from "../App";
import { Link } from "react-router-dom";

export default function Header({ loginState, logout, setChangePasswordOpen, activityMenuPart, setLoginState, toplevel }:
  {
    loginState: LoginState,
    logout: () => void,
    setChangePasswordOpen: React.Dispatch<React.SetStateAction<boolean>>,
    activityMenuPart?: JSX.Element,
    setLoginState: React.Dispatch<React.SetStateAction<LoginState>>,
    toplevel: api.ToplevelResponse | null
  }) {
  const [showMenu, toggleShowMenu] = useReducer((m: boolean) => !m, false);

  return (
    <>
      <AppBar position="sticky">
        <MoonfireMenu
          loginState={loginState}
          requestLogin={() => {
            setLoginState("user-requested-login");
          }}
          logout={logout}
          changePassword={() => setChangePasswordOpen(true)}
          menuClick={toggleShowMenu}
          activityMenuPart={activityMenuPart}
        />
      </AppBar>
      <Drawer
        variant="temporary"
        open={showMenu}
        onClose={toggleShowMenu}
        ModalProps={{
          keepMounted: true,
        }}
      >
        <List>
          <ListItemButton
            key="list"
            onClick={toggleShowMenu}
            component={Link}
            to="/"
          >
            <ListItemIcon>
              <ListIcon />
            </ListItemIcon>
            <ListItemText primary="List view" />
          </ListItemButton>
          <ListItemButton
            key="live"
            onClick={toggleShowMenu}
            component={Link}
            to="/live"
          >
            <ListItemIcon>
              <Videocam />
            </ListItemIcon>
            <ListItemText primary="Live view (experimental)" />
          </ListItemButton>
          {toplevel?.permissions.adminUsers && (
            <ListItemButton
              key="users"
              onClick={toggleShowMenu}
              component={Link}
              to="/users"
            >
              <ListItemIcon>
                <PeopleIcon />
              </ListItemIcon>
              <ListItemText primary="Users" />
            </ListItemButton>
          )}
        </List>
      </Drawer>
    </>
  )
}