import { Box, Button } from "@mui/material";
import * as React from "react";
import { Outlet } from "react-router-dom";
import { AuthApi, AuthInfo } from "../api/AuthApi";
import { AsyncWidget } from "./AsyncWidget";
import { SolarEnergyAppBar } from "./SolarEnergyAppBar";
import { SolarEnergyNavList } from "./SolarEnergyNavList";

interface AuthInfoContext {
  info: AuthInfo;
  reloadAuthInfo: () => void;
}

const AuthInfoContextK = React.createContext<AuthInfoContext | null>(null);

export function BaseAuthenticatedPage(): React.ReactElement {
  const [authInfo, setAuthInfo] = React.useState<null | AuthInfo>(null);

  const signOut = () => {
    AuthApi.SignOut();
  };

  const load = async () => {
    setAuthInfo(await AuthApi.GetAuthInfo());
  };

  return (
    <AsyncWidget
      loadKey="1"
      load={load}
      errMsg="Failed to load user information!"
      errAdditionalElement={() => (
        <>
          <Button onClick={signOut}>Sign out</Button>
        </>
      )}
      build={() => (
        <AuthInfoContextK.Provider
          value={{
            info: authInfo!,
            reloadAuthInfo: load,
          }}
        >
          <Box
            component="div"
            sx={{
              minHeight: "100vh",
              display: "flex",
              flexDirection: "column",
              backgroundColor: (theme) =>
                theme.palette.mode === "light"
                  ? theme.palette.grey[100]
                  : theme.palette.grey[900],
              color: (theme) =>
                theme.palette.mode === "light"
                  ? theme.palette.grey[900]
                  : theme.palette.grey[100],
            }}
          >
            <SolarEnergyAppBar onSignOut={signOut} />

            <Box
              sx={{
                display: "flex",
                flex: "2",
              }}
            >
              <SolarEnergyNavList />
              <div style={{ flex: 1, display: "flex" }}>
                <Outlet />
              </div>
            </Box>
          </Box>
        </AuthInfoContextK.Provider>
      )}
    />
  );
}

export function useAuthInfo(): AuthInfoContext {
  return React.useContext(AuthInfoContextK)!;
}