import CssBaseline from '@material-ui/core/CssBaseline';
import { withStyles, withTheme } from '@material-ui/styles';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import theme from './theme';

const styles = () => {
  return {
    root: {
      height: '100vh',
      zIndex: 1,
      overflow: 'hidden',
      position: 'relative',
      display: 'flex'
    },
    content: {
      zIndex: 3,
      flexGrow: 1
    },
    spacing: (n) => {
      return `${n * 2}px`;
    }
  };
};

const ThemeWrapper = (props) => {
  const { children, classes } = props;
  return (
    <ThemeProvider theme={createTheme(theme)}>
      <CssBaseline />
      <div id='main' className={classes.content}>
        {children}
      </div>
    </ThemeProvider>
  );
};

export default withTheme(withStyles(styles)(ThemeWrapper));