import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';
import type { DrawerStates } from '../sidebar';

export interface CreateClassesProps {
  leftDrawerOpenState: DrawerStates;
  hideHeader?: boolean;
}
const leftMaxPadding = 34;
const createClasses = makeStyles<Theme, CreateClassesProps>(theme => ({
  container: {
    minHeight: '100vh',
    maxWidth: '100vw'
  },
  innerContainer: {
    height: '100%',
    alignItems: 'center'
  },
  contentContainer: props => {
    const { leftDrawerOpenState, hideHeader } = props;
    return {
      paddingTop: theme.spacing(hideHeader ? 6 : 4),
      paddingBottom: theme.spacing(2),
      // Layout controls
      paddingLeft: theme.spacing(leftDrawerOpenState === 'locked' ? leftMaxPadding : 12),
      paddingRight: theme.spacing(4),
      width: '100%',
      display: 'flex',
      justifyContent: 'center'
    };
  },
  content: {
    width: '100%',
    maxWidth: '1376px',
    margin: '0 auto'
  }
}));

export default createClasses;