import * as React from "react"
import { Link as GatsbyLink } from "gatsby"
import { AppBar, Box, Container, CssBaseline, Grid, 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"

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>
  //   )
  // }

  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {!noHeader && (
          <AppBar
            component="header"
            color="transparent"
            position="relative"
            elevation={0}
          >
            <Toolbar>
              <Link
                underline="hover"
                component={GatsbyLink}
                to="/"
                sx={{ textTransform: "lowercase" }}
              >
                {title}
              </Link>
            </Toolbar>
          </AppBar>
        )}
        <Container maxWidth="lg" sx={{ py: 8 }}>
          <Grid container spacing={2}>
            <Grid item xs={12} md={2}>
              <NavMenu location={location} />
            </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 />
      </ThemeProvider>
    </>
  )
}

export default Layout
