import PropTypes from "prop-types";
import { withStyles } from '@material-ui/core/styles'
import Header from '../organisms/Header'
import RootContainer from '../atoms/RootContainer'
import Footer from '../organisms/Footer';

const styles = theme => ({
  head: {
    width: '100%',
    zIndex: '999',
    height: '64px',
    background: theme.palette.secondary.main,
    position: 'fixed',

    [theme.breakpoints.up('sm')]: {
      height: '64px'
    }

  },
  content: {
    background: theme.palette.background.grid,
    top: '64px',
    [theme.breakpoints.up('sm')]: {
      top: '64px',
    },
    position: 'relative',
    overflow: 'auto',
  },
  footer: {
    marginTop: theme.spacing(10),
  },
});

function LayoutGrid(props) {

  const { classes } = props;

  return (
    <RootContainer>
      <div id="H" className={classes.head}>
        <div className={classes.inner}>
          <Header backLink={props.backLink} />
        </div>
      </div>
      <div id="C" className={classes.content}>
        {props.children}
      </div>
      <div id="F" className={classes.footer}>
        <Footer />
      </div>

    </RootContainer>
  )
}

LayoutGrid.defaultProps = {
  backLink: "/"
}
LayoutGrid.propTypes = {
  backLink: PropTypes.string
}

export default withStyles(styles)(LayoutGrid)