import { withStyles } from '@material-ui/core/styles'
import PropTypes from 'prop-types';
import { Button } from '@material-ui/core';
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 Header from '../organisms/HeaderOffre'
import SocialShare from '../organisms/SocialShare'
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
import Hidden from '@material-ui/core/Hidden';
import Link from 'next/link'

const styles = theme => ({
  foot: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    position: 'fixed',
    bottom: 0,
    padding: theme.spacing(1.2, 0),
    backgroundColor: theme.palette.secondary.main,
    boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
  },
  lien:{
    textDecoration:'none',
    color:'#fff'
  },
  contentDefault: {
    height: 'auto',
    position: 'relative',
    paddingBottom: '10vh',
  },
  contentProvided: {
    height: '100%',
    position: 'relative',
  },
  back:
  {
    alignSelf: 'flex-start',
    position: 'absolute',
    zIndex: '999',
    color: 'white',
    backgroundColor: theme.palette.menu.backArrow,
    border: 'none',
    color: 'white',
    padding: theme.spacing(0.2),
    textAlign: 'center',
    textDecoration: 'none',
    display: 'inlineBlock',
    margin: theme.spacing(2),
    borderRadius: '50%',
  },
  icon: {
    fontSize: '2.5em',
  },
  rootButton: {
    '&:hover': {
      backgroundColor: theme.palette.primary.important + '!important',
    },
  },
  button: {
    textTransform: 'inherit',
    marginLeft: theme.spacing(8),
    marginRight: theme.spacing(8),
    padding: theme.spacing(1.2, 2),
    color: theme.palette.secondary.main,
    backgroundColor: theme.palette.primary.important,
  },
  voirEntreprise: {
    textTransform: 'inherit',
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    padding: theme.spacing(1.2, 2),
    color: '#BBBCBD',
    backgroundColor: '#F3F3F4',

  },
  pourvuButton:{
        padding :'10px',
        textTransform: 'inherit',
  },
})

function LayoutOffre(props) {

  const { classes, offreId, offre, isProvided, socialShareUrl } = props;
  const contentClass = (!isProvided) ? classes.contentDefault : classes.contentProvided

  return (
    <RootContainer>
      {isWidthUp('xs', props.width) ?
        (<Header />)
        :
        (<ButtonBase name='back'
          focusRipple
          className={classes.back}
          focusVisibleClassName={classes.focusVisible}
          onClick={() => Router.back()}>
          <ArrowLeft classes={{ root: classes.icon }}></ArrowLeft>
        </ButtonBase>)
      }
      <div id="C" className={contentClass}>
        {props.children}
      </div>

      <Hidden mdUp>
        {!isProvided && (
          <div id="F" className={classes.foot}>
            {/* <div className={classes.inner}>
          <div className={classes.grow} /> */}
            {/* <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
              <Button
                  variant="contained"
                  className={classes.voirEntreprise + ' cypButtonApply'}
              >Voir l'entreprise</Button>              
             </Link> */}
            
            <Button
              variant="contained"
              className={classes.button + ' cypButtonApply'}
              classes={{ root: classes.rootButton}}
              
            >
              <a href={`/Reponse?adId=${offreId}`} className={classes.lien }>Postuler</a>
            </Button>
            <SocialShare url={socialShareUrl} />

            {/* <div className={classes.grow} />
        </div> */}
          </div>
        )}
        {isProvided && (
          <div id="F" className={classes.foot}>
            {/* <div className={classes.inner}>
          <div className={classes.grow} /> */}
            
            
            <Button variant="contained" disabled className={classes.pourvuButton}>
                                        Offre pourvue
            </Button>
            {/* <div className={classes.grow} />
        </div> */}
          </div>
        )}
      </Hidden>

    </RootContainer>
  )
}
LayoutOffre.propTypes = {
  classes: PropTypes.object.isRequired,
  offre: PropTypes.object,
};

export default withStyles(styles)(withWidth()(LayoutOffre))