import { mdiFamilyTree } from "@mdi/js";
import Icon from "@mdi/react";
import SettingsIcon from "@mui/icons-material/Settings";
import { Alert, Button, CircularProgress } 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 { useSetAtom } from "jotai";
import * as React from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";
import { AuthApi } from "../api/AuthApi";
import { User, UserApi } from "../api/UserApi";
import { RouterLink } from "./RouterLink";

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

  const setSignedIn = useSetAtom(AuthApi.authStatus);
  const navigate = useNavigate();

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

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

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

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

  React.useEffect(() => {
    const load = async () => {
      if (error || user != null) return;
      try {
        const user = await UserApi.GetUserInfo();
        setUser(user);
      } catch (e) {
        console.error(e);
        setError(true);
      }
    };
    load();
  });

  if (error)
    return (
      <div
        style={{
          height: "100vh",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
        }}
      >
        <Alert
          severity="error"
          style={{ maxWidth: "300px", marginBottom: "10px" }}
        >
          Echec du chagement des informations utilisateur !
        </Alert>

        <a href="/">Réessayer</a>
      </div>
    );

  if (user === null)
    return (
      <div
        style={{
          height: "100vh",
          justifyContent: "center",
          alignItems: "center",
          display: "flex",
        }}
      >
        <CircularProgress />
      </div>
    );

  return (
    <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>
  );
}