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 HideOnScroll from '../atoms/CollapsibleBack';
import SocialShare from '../organisms/SocialShare'
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
import HeaderEntreprise from '../organisms/HeaderPersonnalise'
import {AppBar,CssBaseline,Container,Toolbar,IconButton,Typography} from "@material-ui/core";
import Hidden from '@material-ui/core/Hidden';
import Link from 'next/link'

const styles = theme => ({
  RootContainer: {
    padding: 0,
    margin: 0,
    maxWidth: 'inherit',
  },
  appBar: {
    backgroundColor: 'transparent',
    boxShadow: 'none',
  },
  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)',
  },
  content: {
    height: 'calc(100vh - 64px)',
    [theme.breakpoints.up('sm')]: {
      height: 'calc(100vh - 64px)',
    },
    position: 'relative',
    paddingBottom: '10vh',
  },
  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(1),
    marginRight: theme.spacing(1),
    padding: theme.spacing(1.2, 2),
    color: theme.palette.secondary.main,
    backgroundColor: theme.palette.primary.important,
    textDecoration:'none',
  },
  voirOffre: {
    textTransform: 'inherit',
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    padding: theme.spacing(1.2, 2),
    color: '#BBBCBD',
    backgroundColor: '#F3F3F4',
  },
  lien:{
    textDecoration:'none',
    color:'#fff'
  },
})

function LayoutCompany(props) {

  const { classes, companyId, companyLibelle } = props;
  const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Entreprise/${companyId}-${_.kebabCase(companyLibelle)}`;
  return (
    
        <RootContainer>
        <HeaderEntreprise  retour="Entreprises" menu="Entreprises"/>
          <div id="C" className={classes.content}>
            {props.children}
          </div>
          
          <Hidden mdUp>
          <div id="F" className={classes.foot}>
          <Button
              variant="contained"
              className={classes.button + ' cypButtonApply'}
              classes={{ root: classes.rootButton}}
              
            >
              <a href={`/Reponse?companyId=${companyId}`} className={classes.lien }>Postuler</a>
            </Button>
            <SocialShare url={socialShareUrl} />
          {/* <Link href="#discover"  >
            <Button
                variant="contained"
                className={classes.voirOffre + ' cypButtonApply'}
            >Voir les offres</Button>
                                            
          </Link> */}
            {/* <a
              href={`/Reponse?companyId=${companyId}`}
              variant="contained"
              className={classes.button}
              classes={{ root: classes.rootButton }}
              // onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
            >
              Candidature spontanée</a> */}
          </div>
          </Hidden>

        </RootContainer>
      

  )
}
LayoutCompany.propTypes = {
  classes: PropTypes.object.isRequired,
  company: PropTypes.object,
};

export default withStyles(styles)(withWidth()(LayoutCompany))