import React, { Component, useEffect } from 'react'
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';
import { Button, Hidden } from '@material-ui/core';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';


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),
  },
  retour:{
    fontFamily: 'Roboto',
    color: '#1E2327',
    fontSize: '0.8rem',
    fontWeight: '500',

  },
  popup:{
    fontFamily: 'Roboto',
    color: '#1E2327',
    fontSize: '0.8rem',
    fontWeight: '500',
  }
});

class LayoutBack extends Component {
  constructor(props) {
    super(props);
    
  }

  state = {
    open: false,

  };
  openDialog() {
      this.setState({ open: true });
  }

  closeDialog() {
      this.setState({ open: false });
  }

  refreshDialog() {
      this.setState({ open: false });
      window.location.reload();
  }


  
  // Add a listener to prevent browser page refresh
  componentWillMount() {
    if (typeof window !== "undefined") {
      window.onbeforeunload = (e) => { 
        console.log('Stop this');
        // this.openDialog();
        e.preventDefault()
        e.returnValue = '';
      };
    }
  }

  // Clear listener
  componentWillUnmount() {
    window.onbeforeunload = null
  }
  


  render() {
  const { classes, height} = this.props;
  
  //height fixed = height 100vh
  var openStudio = this.props.openStudio ? 1 : 0;
  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}
            
            >
            <ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
            {/* <Hidden mdUp className={classes.retour}></Hidden> */}
            <Hidden smDown className={classes.retour}>
              <div onClick={this.props.step==1 || openStudio==1 ? this.openDialog.bind(this) : () => Router.back()}>Retour</div>
              
            </Hidden>

                    <Dialog open={this.state.open}>
                        <DialogTitle className={classes.popup}>  Souhaitez-vous poursuivre votre candidature ?</DialogTitle>
                        <DialogContent className={classes.popup}> Si vous cliquez sur le bouton Supprimer, tous les éléments associés à votre candidature (vidéo, CV…) seront définitivement supprimés. </DialogContent>
                        <DialogActions className={classes.popup}>
                        
                        
                        <Button onClick={this.refreshDialog.bind(this)} >
                          Supprimer
                        </Button>
                        <Button onClick={this.closeDialog.bind(this)} autoFocus>
                            Poursuivre
                        </Button>
                        </DialogActions>
                    </Dialog>
          </ButtonBase>
          <Typography
            component="h1"
            align="center"
            className={classes.title}
          >
            {this.props.text}
          </Typography>
        </div>
      </div>
      <div id="C" className={content}>
        {this.props.children}
      </div>

    </RootContainer>
  )
  }
}
LayoutBack.defaultProps = {
  step: 0,
  openStudio:false
}

export default withStyles(styles)(LayoutBack)