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

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

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

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

  },
  foot: {
    height: '56px',
    width: '100%',
    position: 'relative',
    top: '56px',
    [theme.breakpoints.up('sm')]: {
      height: '64px',
      top: '64px'
    },

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

  }
});

function Layout(props) {

  const { classes } = props;

  return (
    <div className={classes.root}>
      <div id="H" className={classes.head}>
        <div className={classes.inner}>
          <Header />
        </div>
      </div>
      <div id="C" className={classes.content}>
        {props.children}
      </div>
      <div id="T" className={classes.foot}>
        <div className={classes.inner}>
          <Footer />
        </div>
      </div>
    </div>
  )
}

export default withStyles(styles)(Layout)