import React, { useState } from "react"
import { Link as GatsbyLink } from "gatsby"
import { AppBar, Box, Container, CssBaseline, Drawer, Grid, IconButton, Link, ThemeProvider, Toolbar } from "@mui/material"
import NavMenu from "./nav-menu"
import theme from "./theme"
import Footer from "./footer"
import flower from "../images/flower.png"
import MenuIcon from "@mui/icons-material/Menu"
import CloseIcon from "@mui/icons-material/Close"

const Layout = ({ location, title, children, noHeader }) => {
  // const rootPath = `${__PATH_PREFIX__}/`
  // const isRootPath = location.pathname === rootPath
  // let header

  // if (isRootPath) {
  //   header = (
  //     <h1 className="main-heading">
  //       <Link to="/">{title}</Link>
  //     </h1>
  //   )
  // } else {
  //   header = (
  //     <Link className="header-link-home" to="/">
  //       {title}
  //     </Link>
  //   )
  // }

  const [showDrawer, setShowDrawer] = useState(false)

  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <AppBar
          component="header"
          color="transparent"
          position="relative"
          elevation={0}
        >
          <Toolbar
            sx={{ justifyContent: noHeader ? "flex-end" : "space-between" }}
          >
            {!noHeader && (
              <Link
                underline="hover"
                component={GatsbyLink}
                to="/"
                sx={{ textTransform: "lowercase" }}
              >
                {title}
              </Link>
            )}
            <IconButton
              color="primary"
              sx={{ display: { xs: "inline-flex", md: "none" } }}
              onClick={() => setShowDrawer(!showDrawer)}
            >
              <MenuIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
        <Container maxWidth="lg" sx={{ py: 8 }}>
          <Grid container spacing={2}>
            <Grid item xs={false} md={2}>
              <Box display={{ xs: "none", md: "block" }}>
                <NavMenu location={location} />
              </Box>
            </Grid>
            <Grid item xs={12} md={6}>
              <main>{children}</main>
            </Grid>
            <Grid item xs={12} md={4}>
              <Box position={"relative"} height="100%" zIndex={-100}>
                <Box
                  sx={{
                    position: "absolute",
                    height: "100%",
                    width: "100%",
                    bottom: -90,
                    backgroundImage: `url(${flower})`,
                    backgroundRepeat: "no-repeat",
                    backgroundPositionY: "100%",
                  }}
                />
              </Box>
            </Grid>
          </Grid>
        </Container>
        <Footer />
        <Drawer
          anchor="right"
          open={showDrawer}
          onClose={() => setShowDrawer(false)}
        >
          <Box minWidth={240}>
            <Box display="flex" justifyContent="flex-end" height={56} pr={2}>
              <IconButton color="primary" onClick={() => setShowDrawer(false)}>
                <CloseIcon />
              </IconButton>
            </Box>
            <NavMenu location={location} />
          </Box>
        </Drawer>
      </ThemeProvider>
    </>
  )
}

export default Layout