import { Drawer, Hidden } from "@material-ui/core";
import React, { memo } from "react";
import Aside from "../Aside"
import TopBar from '../TopBar'
import useStyles from "./style"


const Frame = memo(({ contents, frontmatter, window }) => {

  const classes = useStyles()
  const [mobileOpen, setMobileOpen] = React.useState(false);
  // const [isNoContents, setIsNoContents] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const container = window !== undefined ? () => window().document.body : undefined;

  const series = Boolean(contents) ? contents.series : undefined


  // console.log(contents)
  // console.log(frontmatter)
  return (
    <div>
      <TopBar
        handleDrawerToggle={handleDrawerToggle}
        series={series}
      />
      {contents ?
        <nav className={classes.drawer}>
          {/* on mobile phone */}
          <Hidden smUp implementation="css">
            <Drawer
              container={container}
              variant="temporary"
              open={mobileOpen}
              onClose={handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper,
              }}
              ModalProps={{
                keepMounted: true, // Better open performance on mobile.
              }}
            >
              <Aside frontmatter={frontmatter} contents={contents} />
            </Drawer>
          </Hidden>
          {/* on pc web*/}
          <Hidden xsDown implementation="css">
            <Drawer
              classes={{
                paper: classes.drawerPaper,
              }}
              variant="permanent"
              open
            >
              <Aside frontmatter={frontmatter} contents={contents} />
            </Drawer>
          </Hidden>
        </nav>
        : 
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            <Aside frontmatter={frontmatter} contents={undefined} />
          </Drawer>
        </Hidden>}
    </div>
  )

})

export default Frame