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 Close from '@material-ui/icons/Close';
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: '#1E2327',
    right:'30px'
  },
  head: {
    zIndex: '999',
    width: '100%',
    height: '100px',
    backgroundColor: '#1E2327',
    position: 'fixed',
    [theme.breakpoints.up('sm')]: {
      height: '100px'
    }
  },
  icon: {
    fontSize: '3em',
    textAlign :'right',
    top:'30px',
    right:'30px',
    color:'#fff',
    margin:'20px'
  },
  title: { 
    color: theme.palette.primary.dark,
  },
  content: {
    top: '100px',
    width: '100%',
    minHeight: '1000px',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    position: 'relative',
    backgroundColor: '#1E2327',
  },
  contentFixed: {
     height: 'calc(100vh - 100px)',
    backgroundColor: '#1E2327',
  },
  back: {
    zIndex: 10,
    border: 'none',
    padding: theme.spacing(0.2),
    textAlign: 'center',
    textDecoration: 'none',
    borderRadius: '50%',
    position: 'absolute',
    right: theme.spacing(1),
    backgroundColor: '#34383C'
  },
  player: {
    background:'#1E2327'
  },
});

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' className={content}>
      <div id="H" className={classes.head}>
        <div className={classes.inner}>
          <ButtonBase name='back'
            focusRipple
            className={classes.back}
            focusVisibleClassName={classes.focusVisible}
            onClick={() => Router.push(props.url)}>
            <Close color="#fff" classes={{ root: classes.icon }}></Close>
          </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)