import React, { useState } from "react";
import "./view-base.scss";
import Header from "../Header";
import { Hidden, makeStyles, useMediaQuery } from "@material-ui/core";
import { DRAWER_WIDTH, TRANSITION_DURATION } from "../../constants/style";
import MobileDrawer from "../Drawer/mobile-drawer";
import Drawer from "../Drawer";
import { cubesImage } from "src/constants/img";
import Messages from "../Messages";

interface IViewBaseProps {
  children: React.ReactNode;
}

const useStyles = makeStyles(theme => ({
  drawer: {
    [theme.breakpoints.up("md")]: {
      width: DRAWER_WIDTH,
      flexShrink: 0,
    },
  },
  content: {
    padding: theme.spacing(1),
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: TRANSITION_DURATION,
    }),
    height: "100%",
    overflow: "auto",
    marginLeft: DRAWER_WIDTH,
  },
  contentShift: {
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.easeOut,
      duration: TRANSITION_DURATION,
    }),
    marginLeft: 0,
  },
}));

function ViewBase({ children }: IViewBaseProps) {
  const classes = useStyles();

  const [mobileOpen, setMobileOpen] = useState(false);

  const isSmallerScreen = useMediaQuery("(max-width: 960px)");
  const isSmallScreen = useMediaQuery("(max-width: 600px)");

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

  return (
    <div className="view-base-root">
      <Messages />
      <Header drawe={!isSmallerScreen} handleDrawerToggle={handleDrawerToggle} />
      <div className={classes.drawer}>
        <Hidden mdUp>
          <MobileDrawer mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
        </Hidden>
        <Hidden smDown>
          <Drawer />
        </Hidden>
      </div>
      <div className={`${classes.content} ${isSmallerScreen && classes.contentShift}`}>
        {!isSmallerScreen && (
          <div className="cubes-top">
            <p>{cubesImage}</p>
          </div>
        )}
        {!isSmallScreen && (
          <div className="cubes-bottom">
            <p>{cubesImage}</p>
          </div>
        )}
        {children}
      </div>
    </div>
  );
}

export default ViewBase;