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/Layout2/Header";
import LeftNav, { LeftNavProps } from "@/components/Layout2/LeftNav";
import Nav from "@/components/Layout2/Nav";
import SEO, { SEOProps } from "@/components/Layout2/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 { useSnackbar } from "notistack";

import { useSession } from "@/utils/hook";
import type { NavItemType } from "@/components/Layout2/_config";

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?: SEOProps;
  navItems?: NavItemType[];
  navitemSelected?: string;
  mainClass?: string;
  boxClass?: string;
  containerClass?: string;
}

export default function Layout(props: LayoutProps) {
  const {
    children,
    meta,
    mdx,
    sessionRequired,
    navItems,
    navitemSelected,
    mainClass,
    containerClass,
    boxClass,
  } = props;

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

  const { enqueueSnackbar } = useSnackbar();

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

  const [, error] = useSession(sessionRequired);

  React.useEffect(() => {
    if (error) {
      enqueueSnackbar(`Error: Init user session`, { variant: "error" });
    }
  }, [error, enqueueSnackbar]);

  return (
    <>
      <SEO {...meta} />
      <Box
        sx={{
          display: "flex",
          height: "100vh",
          flexDirection: "column",
          backgroundColor: (theme) => theme.palette.background.paper,
        }}
      >
        <CssBaseline />
        <Header open={open} toggleDrawer={toggleDrawer} />
        {navItems && (
          <Box
            sx={{
              mt: 8,
              backgroundColor: (theme) => theme.palette.background.paper,
            }}
          >
            <Container>
              <Nav items={navItems} selected={navitemSelected} />
            </Container>
          </Box>
        )}
        <Box
          component="main"
          sx={{
            backgroundColor: "rgba(51, 154, 250, 0.05)",

            flexGrow: 1,
            height: "calc(100vh - 64px)",
            overflow: "auto",
          }}
          className={mainClass}
        >
          {/* <FeedbackFAB /> */}
          <Container
            maxWidth="lg"
            sx={{
              mt: 4,
              mb: 4,
            }}
            className={containerClass}
          >
            <Box
              sx={{
                minHeight: "calc(100vh - 64px - 64px - 104px)",
                position: "relative",
                // overflow: "auto",
              }}
              className={boxClass}
            >
              {children}
            </Box>
            <Copyright
              typographyProps={{
                sx: { pt: 4 },
              }}
            />
          </Container>
        </Box>
      </Box>
    </>
  );
}