import React, { Fragment } from 'react';
import PropTypes from "prop-types";
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
  },
  start: {
    alignItems: 'flex-start',
  },
  center: {
    alignItems: 'center',
  },
  end: {
    alignItems: 'flex-end',
  },
});

class RootContainer extends React.Component {

  render() {
    const { classes, children, align } = this.props;

    return (
      <Fragment>
        {(() => {
        switch(align) {
          case 'start':
            return <section className={classes.root + ' ' + classes.start}>{children}</section>;
          case 'center':
            return <section className={classes.root + ' ' + classes.center}>{children}</section>;
          case 'end':
            return <section className={classes.root + ' ' + classes.end}>{children}</section>;
          default:
            return <section className={classes.root}>{children}</section>;
        }
        })()}
      </Fragment>
    );
  }
}


RootContainer.propTypes = {
    classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(RootContainer);