import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Unstable_Grid2";
import { MDXProvider } from "@mdx-js/react";

import Copyright from "@/components/Layout/Copyright";
import Header from "@/components/Layout/Header";
import LeftNav from "@/components/Layout/LeftNav";
import SEO from "@/components/Layout/SEO";
import MarkdownContainer from "@/components/Layout/Mdx";
import { MdxBreadcrumbs } from "@/components/Layout/Breadcrumbs";
import { Headings } from "@/components/Mdx/Headings";
import { Paragraph } from "@/components/Mdx";
import FeedbackFAB from "@/components/Layout/Feedback";

import { useSession } from "@/utils/hook";

const components = {
  h1: Headings.h1,
  h2: Headings.h2,
  h3: Headings.h3,
  h4: Headings.h4,
  h5: Headings.h5,
  h6: Headings.h6,
  p: Paragraph,
};

export interface LayoutProps {
  children: React.ReactNode;
  mdx?: boolean;
  sessionRequired?: boolean;
  meta?: {
    title?: string;
    description?: string;
    disableBreadcrumb?: boolean;
    parents?: {
      title: string;
      href: string;
    }[];
  };
}

export default function Layout(props: LayoutProps) {
  const { children, meta, mdx, sessionRequired } = props;

  const [open, setOpen] = React.useState(false);

  const toggleDrawer = () => {
    setOpen(!open);
  };

  useSession(sessionRequired);

  return (
    <>
      <SEO {...meta} />
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <Header open={open} toggleDrawer={toggleDrawer} />
        <LeftNav open={open} toggleDrawer={toggleDrawer} />
        <Box
          component="main"
          sx={{
            // backgroundColor: (theme) =>
            //   theme.palette.mode === "light"
            //     ? theme.palette.grey[100]
            //     : theme.palette.grey[900],
            backgroundColor: (theme) => theme.palette.background.paper,

            flexGrow: 1,
            height: "100vh",
            overflow: "auto",
          }}
        >
          <FeedbackFAB />
          <Toolbar />
          <Container
            maxWidth="lg"
            sx={{
              mt: 4,
              mb: 4,
            }}
          >
            <Box
              sx={{
                minHeight: "calc(100vh - 64px - 56px - 56px)",
                position: "relative",
              }}
            >
              {mdx ? (
                <>
                  <MDXProvider components={components}>
                    {/* {!meta?.disableBreadcrumb && meta?.title && (
                      <MdxBreadcrumbs
                        title={meta.title}
                        parents={[
                          {
                            title: "Home",
                            href: "/",
                          },
                          ...(meta?.parents || []),
                        ]}
                      />
                    )} */}
                    <MarkdownContainer>{children}</MarkdownContainer>
                  </MDXProvider>
                </>
              ) : (
                <>{children}</>
              )}
            </Box>
            <Copyright
              typographyProps={{
                sx: { pt: 4 },
              }}
            />
          </Container>
        </Box>
      </Box>
    </>
  );
}