import PropTypes from "prop-types";

import { withStyles } from '@material-ui/core/styles'
import Header from './Header'

const styles = theme => ({
  root: {
    height: '100%'
  },
  head: {
    width: '100%',

    height: '56px',
    background: 'silver',
    position: 'fixed',

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

  },
  content: {
    top: '56px',
    height: 'calc(100vh - 56px)',
    [theme.breakpoints.up('sm')]: {
      top: '64px',
      height: 'calc(100vh - 64px)',
    },
    position: 'relative',
    overflow: 'auto',

  }
});

function LayoutGrid(props) {

  const { classes } = props;

  return (
    <div className={classes.root}>
      <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>
  )
}

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

export default withStyles(styles)(LayoutGrid)