import { withStyles } from '@material-ui/core/styles'
import Router from 'next/router';
import RootContainer from '../atoms/RootContainer'
import ButtonBase from "@material-ui/core/ButtonBase";
import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
  inner: {
    height: '100%',
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 6px 10px 0 rgba(0, 0, 0, 0.04), 0 1px 10px 0 rgba(0, 0, 0, 0.04), 0 3px 5px -1px rgba(0, 0, 0, 0.04)',
    backgroundColor: theme.palette.secondary.main,
  },
  head: {
    zIndex: '999',
    width: '100%',
    height: '64px',
    background: theme.palette.background.main,
    position: 'fixed',
    [theme.breakpoints.up('sm')]: {
      height: '64px'
    }
  },
  icon: {
    fontSize: '2.5em',
  },
  title: { 
    color: theme.palette.primary.dark,
  },
  content: {
    top: '64px',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    top: '64px',
    position: 'relative',
  },
  contentFixed: {
    height: 'calc(100vh - 64px)',
  },
  back: {
    zIndex: 10,
    border: 'none',
    padding: theme.spacing(0.2),
    textAlign: 'center',
    textDecoration: 'none',
    borderRadius: '50%',
    position: 'absolute',
    left: theme.spacing(1),
  },
});

function LayoutBack(props) {

  const { classes, height} = props;
  
  //height fixed = height 100vh
  const content = (height == 'fixed') ? classes.content+' '+classes.contentFixed : classes.content
  return (
    <RootContainer align='center'>
      <div id="H" className={classes.head}>
        <div className={classes.inner}>
          <ButtonBase name='back'
            focusRipple
            className={classes.back}
            focusVisibleClassName={classes.focusVisible}
            onClick={() => Router.back()}>
            <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
          </ButtonBase>
          <Typography
            component="h1"
            align="center"
            className={classes.title}
          >
            {props.text}
          </Typography>
        </div>
      </div>
      <div id="C" className={content}>
        {props.children}
      </div>

    </RootContainer>
  )
}

export default withStyles(styles)(LayoutBack)