import { Box, Container, Grid, Paper } from "@mui/material";
import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts";
import CircularProgress from "../Common/CircularProgress.tsx";
import Logo from "../Common/Logo.tsx";
import AutoHeight from "../Common/AutoHeight.tsx";
import { Outlet, useNavigation } from "react-router-dom";

const Loading = () => {
  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        pt: 7,
        pb: 9,
      }}
    >
      <CircularProgress />
    </Box>
  );
};

const HeadlessFrame = () => {
  const loading = useAppSelector(
    (state) => state.globalState.loading.headlessFrame,
  );
  const dispatch = useAppDispatch();
  let navigation = useNavigation();

  return (
    <Box
      sx={{
        backgroundColor: (theme) =>
          theme.palette.mode === "light"
            ? theme.palette.grey[100]
            : theme.palette.grey[900],
        flexGrow: 1,
        height: "100vh",
        overflow: "auto",
      }}
    >
      <Container maxWidth={"xs"}>
        <Grid
          container
          spacing={0}
          direction="column"
          alignItems="center"
          justifyContent="center"
          sx={{ minHeight: "100vh" }}
        >
          <Box sx={{ width: "100%", py: 2 }}>
            <Paper
              sx={{
                padding: (theme) =>
                  `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(3)}`,
              }}
            >
              <Logo
                sx={{
                  maxWidth: "40%",
                  maxHeight: "40px",
                  mb: 2,
                }}
              />
              <AutoHeight>
                <div>
                  <Box
                    sx={{
                      display:
                        loading || navigation.state !== "idle"
                          ? "none"
                          : "block",
                    }}
                  >
                    <Outlet />
                  </Box>
                  {(loading || navigation.state !== "idle") && <Loading />}
                </div>
              </AutoHeight>
            </Paper>
          </Box>
        </Grid>
      </Container>
    </Box>
  );
};

export default HeadlessFrame;
