import { mdiFamilyTree } from "@mdi/js";
import Icon from "@mdi/react";
import SettingsIcon from "@mui/icons-material/Settings";
import { Button } 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 { Link, Outlet, useNavigate } from "react-router-dom";
import { useAuth } from "../App";
import { AuthApi } from "../api/AuthApi";
import { User, UserApi } from "../api/UserApi";
import { AsyncWidget } from "./AsyncWidget";
import { RouterLink } from "./RouterLink";

export function BaseAuthenticatedPage(): React.ReactElement {
  const [user, setUser] = React.useState<null | User>(null);

  const auth = useAuth();
  const navigate = useNavigate();

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const load = async () => {
    setUser(await UserApi.GetUserInfo());
  };

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

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

  const signOut = () => {
    handleCloseMenu();
    AuthApi.SignOut();
    navigate("/");
    auth.setSignedIn(false);
  };

  return (
    <AsyncWidget
      loadKey="1"
      load={load}
      errMsg="Echec du chargement des informations utilisateur !"
      build={() => (
        <div
          style={{
            minHeight: "100vh",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <AppBar position="sticky">
            <Toolbar>
              <Icon
                path={mdiFamilyTree}
                size={1}
                style={{ marginRight: "1rem" }}
              />

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

              <div>
                <Button size="large" color="inherit">
                  {user!.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: "top",
                    horizontal: "right",
                  }}
                  keepMounted
                  transformOrigin={{
                    vertical: "top",
                    horizontal: "right",
                  }}
                  open={Boolean(anchorEl)}
                  onClose={handleCloseMenu}
                >
                  <Link
                    to="/profile"
                    style={{ color: "inherit", textDecoration: "none" }}
                  >
                    <MenuItem onClick={handleCloseMenu}>Profil</MenuItem>
                  </Link>
                  <MenuItem onClick={signOut}>Déconnexion</MenuItem>
                </Menu>
              </div>
            </Toolbar>
          </AppBar>
          <Outlet />
        </div>
      )}
    />
  );
}