import { FC, PropsWithChildren } from "react";
import getConfig from "next/config";
import { Grid, Container } from "@mui/material";
import CookieConsent from "react-cookie-consent";
import { useCookies } from "react-cookie";
import { TopNav } from "./TopNav";
import { Sidebar } from "./Sidebar";
import { GettingStartedDialog } from "./GettingStartedDialog";
import { useAppContext } from "./AppProvider";
// import { Footer } from "./Footer";

export const Layout: FC<PropsWithChildren> = ({ children }: any) => {
  const [cookies, setCookie] = useCookies(["cookieConsent"]);
  const consentGranted = cookies.cookieConsent === "true";
  const {
    publicRuntimeConfig: { embedded },
  } = getConfig();

  const {
    colors: {
      white,
      almostBlack,
      leafcutterElectricBlue,
      cdrLinkOrange,
      helpYellow,
    },
  } = useAppContext();

  return (
    <>
      <Grid container direction="column">
        {!embedded && (
          <Grid item>
            <TopNav />
          </Grid>
        )}
        {!embedded && <Sidebar open />}
        <Grid
          item
          sx={{ mt: embedded ? 0 : "100px", ml: embedded ? 0 : "310px" }}
        >
          <Container sx={{ padding: 2 }}>{children}</Container>
        </Grid>
      </Grid>
      {!consentGranted ? (
        <CookieConsent
          style={{
            zIndex: 1500,
            backgroundColor: helpYellow,
            color: almostBlack,
            borderTop: `1px solid ${leafcutterElectricBlue}`,
          }}
          onAccept={() => setCookie("cookieConsent", "true", { path: "/" })}
          buttonStyle={{
            borderRadius: 500,
            backgroundColor: cdrLinkOrange,
            color: white,
            textTransform: "uppercase",
            padding: "10px 20px",
            fontWeight: "bold",
            fontSize: 14,
          }}
        >
          Leafcutter uses cookies for core funtionality.
        </CookieConsent>
      ) : null}
      <GettingStartedDialog />
    </>
  );
};