import React, { Fragment,lazy, Suspense } from 'react'
import Router from 'next/router'
import { withStyles } from '@material-ui/core/styles';
import getConfig from 'next/config'
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Avatar from '@material-ui/core/Avatar';
import Card from '@material-ui/core/Card';
import Chip from '@material-ui/core/Chip';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import CardHeader from '@material-ui/core/CardHeader';
import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
import IconText from '../atoms/IconText';
import IconTextInline from './../atoms/IconTextInline';
import SocialShare from './SocialShare';
import SimpleCollapse from '../atoms/SimpleCollapse';
import _ from "lodash/string";
import Ar from "lodash/array";
import Hidden from '@material-ui/core/Hidden';
import Link from 'next/link'
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
const VideoVimeo = lazy(() => import('../atoms/VideoVimeo'));
//import VideoVimeo from '../atoms/VideoVimeo'
import OgHead from '../atoms/OgHead'
import JobPosting from '../atoms/JobPosting'
import Moment from 'react-moment';
import StickyBox from "react-sticky-box";
const renderLoader = () => <p>Chargement</p>;
const styles = theme => ({
    primary: {
        color: theme.palette.primary.main,
    },
    root: {
        position: 'relative',
        textAlign: 'center',
        paddingTop: theme.spacing(10),
        justifyContent: 'center',
    },
    lien:{
        textDecoration:'none'
    },
    container: {
        padding: theme.spacing(0, 1),
        [theme.breakpoints.up('md')]: {
            padding: '0 5px',
        },
    },
    headerContainer: {
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        margin: theme.spacing(0, 0),
    },
    headerContainerMobile: {
        display: 'flex',
        top : '-20px',
        marginLeft : '20px'
        
    },
    headerContainerDesktop: {
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        margin: theme.spacing(0, 0),
        [theme.breakpoints.up('md')]: {
            padding: '10px 5px',
        },
        '& button': {
            marginRight: 0,
        },
    },
    offerInfoContainer: {
        display: 'flex',
    },
    buttonContainer: {
        alignItems: 'right',
    },
    infoContainer: {
        display: 'flex',
        flexDirection: 'column',
        margin: theme.spacing(0, 1.5),
        '& a': {
            textDecoration: 'none',
            color: theme.palette.primary.dark,
        }
    },
    infoContainerMobile: {
        display: 'flex',
        flexDirection: 'column',
        margin: theme.spacing(0, 1.5),
        '& a': {
            textDecoration: 'none',
            color: theme.palette.primary.dark,
        }
    },
    logoContainer: {
        display: 'flex',
        alignItems: 'center',
        width: 60,
        height: 60,
        backgroundColor: 'white',
        boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
        border: 'solid 5px white',
        borderRadius: '5px',

    },
    IconTextContainer: {
        // paddingTop: theme.spacing(1.5, 0),
        // height: '100%',
    },
    IconTextContainerDesktop: {
        display: '',
        alignItems: 'center',
        // justifyContent: 'flex-start',
        width: '100%',
        borderBottom: '1px solid #E8E8E9',
        paddingBottom: '15px',
        marginBottom: '10px'
    },
    IconTextContainerMobile: {
        display: '',
        alignItems: 'center',
        // justifyContent: 'flex-start',
        width: '100%',
        borderTop: '1px solid #E8E8E9',
        borderBottom: '1px solid #E8E8E9',
        paddingTop: '20px',
        paddingBottom: '20px',
        marginLeft:'20px',
        marginRight:'20px'
    },
    contentContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        top:'40px',
        margin: theme.spacing(0, 1),
    },
    tagsContainer: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexWrap: 'wrap',
        width: '100%',
        [theme.breakpoints.up('md')]: {
            justifyContent: 'flex-start',
        },
    },
    shareContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignSelf: 'center',
        textAlign:'center'
    },
    discoverContainerCompany: {
        backgroundColor: theme.palette.background.grey,
        paddingBottom: theme.spacing(2),
        '& section': {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: theme.palette.background.grey,
        },
        boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
        // transform: 'translateY(-0px)',
        // transition: 'transform 0.25s, box-shadow ease-out',
          
        '&:hover': {
           boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
        //   transform: 'translateY(-5px)',
          transition: 'transform 0.5s, box-shadow 2s',
          '& .cardHover': {
              backgroundColor: 'rgba(0,0,0,0)',
          },
        },
    },
    discoverContainerImage: {
        cursor: 'pointer',
        position: 'relative',
        height:'auto',
        '& img': {
            width: '100%',
            borderRadius: '5px',
            filter: 'brightness(60%)',
            '&:hover': {
                filter: 'brightness(55%)',
             },
        },
        [theme.breakpoints.up('md')]: {
            width: '100%',
        },
    },

    discoverContainerTerritory: {
        
        paddingBottom: theme.spacing(10),
        [theme.breakpoints.up('md')]: {
            paddingTop: theme.spacing(2),
            paddingBottom: theme.spacing(8),
        },
    },
    discoverTerritoryContentContainer: {
        boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
    },
    logo: {
        width: '120px',
        height: '120px',
        marginBottom:'20px',
        border: 'solid 5px white',
        display: 'flex',
        boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
        alignItems: 'center',
        borderRadius: '5px',
        backgroundColor: 'white'

    },
    logoMobile: {
        width: '80px',
        height: '80px',
        marginTop:'20px',
        border: 'solid 5px white',
        display: 'flex',
        boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
        alignItems: 'center',
        borderRadius: '5px',
        backgroundColor: 'white'
    },
    stickyContainer:{
        margin: '10px 0px',
        borderBottom: '1px solid #E8E8E9',
        marginBottom: '20px',
        paddingBottom: '5px',

    },
    stickySeparation:{
        
        // borderBottom: '1px solid #E8E8E9',
        // paddingBottom: '20px',

    },
    stickyTitle:{
        fontWeight: '600',
        fontSize: '1.250em',
        marginBottom:'10px',
        color: '#1E2327',
    },
    stickyEntreprise:{
        fontWeight: '400',
        fontSize: '1em',
        marginBottom:'20px',
        color: '#1E2327',
    },
    MuiAvatarImg: {
        objectFit: 'contain',
    },
    title: {
        fontSize: '1.875em',
        fontWeight: '600',
        marginTop:'10px',
        marginBottom:'20px',
        paddingRight:'20px',
        color: '#1E2327',

        [theme.breakpoints.up('md')]: {
            paddingTop: theme.spacing(2),
        },
    },
    
    offreTitle: {
        [theme.breakpoints.up('md')]: {
            fontSize: '1.3em',
            fontWeight: '600',
        },
    },
    discoverTitle: {
        padding: theme.spacing(3, 0),
    },
    voirEntreprise: {
        fontSize: '1.625em',
        fontWeight: '600',
        position: 'absolute',
        top: '20px',
        left: '40px',
        right: '40px',
        color: '#fff',
        textAlign:'left',
        lineHeight : '40px',
        marginBottom : '40px'

    },
    voirEntrepriseMobile: {
        fontSize: '1.125em',
        fontWeight: '600',
        position: 'absolute',
        top: '20px',
        left: '40px',
        right: '40px',
        color: '#fff',
        textAlign:'left',
        lineHeight : '40px',
        marginBottom : '40px'

    },
    voirTerritoire: {
        fontSize: '1.625em',
        fontWeight: '600',
        position: 'absolute',
        top: '-20px',
        left: '40px',
        right: '40px',
        color: '#fff',
        textAlign:'left',
        lineHeight : '40px',
        marginBottom : '40px'

    },
    voirTerritoireMobile: {
        fontSize: '1.125em',
        fontWeight: '600',
        position: 'absolute',
        top: '-20px',
        left: '40px',
        right: '40px',
        color: '#fff',
        textAlign:'left',
        lineHeight : '40px',
        marginBottom : '40px'

    },
    contentText: {
        width:"95%",
        fontSize: '1em',
        fontWeight: '300',
        padding: theme.spacing(1, 0),
        whiteSpace: 'pre-line',
        textAlign: 'justify',
        lineHeight : '2em',
        color: '#1E2327'
    },
    ul:{
        lineHeight : '5em',
    },
    contentCondition: {
        fontSize: '1em',
        fontWeight: '300',
        textTransform: 'uppercase',
        textAlign: 'center',
        padding: theme.spacing(1.5, 0),
    },
    contentShare: {
        fontSize: '1em',
        fontWeight: '500',
        textAlign: 'center',
        marginTop:'30px'
    },
    companyName: {
        fontSize: '1.3em',
        fontWeight: '400',
        [theme.breakpoints.up('md')]: {
            fontSize: '1em',
        },
    },
    iconText: {
        marginLeft: 0,
        justifyContent: 'flex-start',
        fontWeight: '400',
        padding: theme.spacing(0.25, 0),
    },
    iconTextDesktop: {
        marginLeft: 0,
        justifyContent: 'flex-start',
        padding: theme.spacing(0.25, 0),
        width: 'inherit',
    },
    iconTextIcon: {
        color: "#1E2327",
        fontSize: '1em',
        fontWeight: '400',
        paddingLeft: '0px',

    },
    iconTextText: {
        fontWeight: 'lighter',
        color: "#000",
        fontSize: '1em',
        paddingLeft: theme.spacing(1),
        // borderBottom: '1px solid #E8E8E9',
        paddingBottom: '1px',
        verticalAlign: 'middle',
        fontWeight: '400',
    },
    
    tags: {
        color: theme.palette.primary.dark,
        fontWeight: '300',
        backgroundColor: theme.palette.tags.main,
        textTransform: 'capitalize',
        margin: theme.spacing(1),
    },
    shareIcons: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    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,
    },
    chip: {
        color: theme.palette.secondary.main,
        backgroundColor: theme.palette.secondary.important,
        padding: theme.spacing(1),
        margin: theme.spacing(1, 0),
        fontSize: '1em',
        [theme.breakpoints.up('md')]: {
            marginRight: 'auto',
        },
    },
    pourvu: {
        
        padding: '9.6px 16px',
        margin: '35px 0',
        textAlign : 'center',
       
    },
    pourvuButton:{
        textTransform: 'inherit',
    },
    videoOffre: {
        [theme.breakpoints.up('md')]: {
            paddingBottom: '35%', /* 16:9 */
        },
    },
    videoTerritory: {
        paddingBottom: '56% !important',
        [theme.breakpoints.up('md')]: {
            paddingBottom: '56% !important',
        }
    },
    territoryTitle: {
        fontWeight: '500',
        padding: theme.spacing(2),
        paddingBottom: 0,
        background: theme.palette.background.default,
    },
    territoryType: {
        fontWeight: '200',
        padding: theme.spacing(2),
        paddingTop: 0,
        background: theme.palette.background.default,
        borderBottomLeftRadius: '5px',
        borderBottomRightRadius: '5px',
    },

    card: {
        textAlign: 'center',
        display: 'flex',
        //minHeight: '21vh',
        // maxHeight: '32vh',
        borderRadius: '5px',
        width: '100%',
        cursor: 'pointer',
        boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
        // transform: 'translateY(-0px)',
        // transition: 'transform 0.25s, box-shadow ease-out',
          
        '&:hover': {
           boxShadow: '0px 0px 0px rgba(30, 35, 39, 0.15)',
        //   transform: 'translateY(-5px)',
          transition: 'transform 0.5s, box-shadow 2s',
          '& .cardHover': {
              backgroundColor: 'rgba(0,0,0,0)',
          },
        },
        '& > div': {
          padding: '0 !important',
        },
        [theme.breakpoints.up('md')]: {
          minHeight: '65vh',
          // maxHeight: '20vh',
        },
        // margin: '1vh 2vh 1vh 2vh',
        // [theme.breakpoints.up('sm')]: {
        //   margin: '1vh 0 1vh 0',
        // },
      },
      content: {
        //display: 'flex',
        // alignItems: 'center',
        width: '100%',
        borderRadius: '5px',
        backgroundColor: 'rgba(30,35,39,0.4)',
        // padding: 0,
      },
      cover: {
        position: 'relative',
        width: '100%',
        height: '100%',
        // backgroundPosition: 'center',
        // backgroundSize: 'cover',
        // backgroundRepeat: 'no-repeat',
        backgroundBlendMode: 'darken',
        backgroundColor: 'rgba(30,35,39,0.25)',
        // transition: 'background-color 1s',
        // [theme.breakpoints.up('md')]: {
        //   width: '100%',
        // },
        
        
      },
        iconPlay: {
            fontSize: '2em',
            color: theme.palette.background.grey,
            position: 'absolute',
            bottom: '60px',
            left: '40px',
            color: '#1E2327',
            backgroundColor: '#fff',
            borderRadius: '100px',
            padding: '15px',
            marginRight:'15px'

        },
        playerTexte: {
            fontSize: '1.625em',
            fontWeight: '600',
            position: 'absolute',
            bottom: '80px',
            left: '120px',
            color: '#fff',
        },
        iconPlayBas: {
            fontSize: '2em',
            color: theme.palette.background.grey,
            position: 'absolute',
            bottom: '40px',
            left: '40px',
            color: '#1E2327',
            backgroundColor: '#fff',
            borderRadius: '100px',
            padding: '15px',
            marginRight:'15px'

        },
        playerTexteBas: {
            fontSize: '1.625em',
            fontWeight: '600',
            position: 'absolute',
            bottom: '60px',
            left: '120px',
            color: '#fff',
        },
        iconPlayMobile: {
            fontSize: '1.5em',
            color: theme.palette.background.grey,
            position: 'absolute',
            bottom: '60px',
            left: '20px',
            color: '#1E2327',
            backgroundColor: '#fff',
            borderRadius: '100px',
            padding: '10px',
            marginRight:'15px'

        },
        playerTexteMobile: {
            fontSize: '1em',
            fontWeight: '600',
            position: 'absolute',
            bottom: '70px',
            left: '80px',
            color: '#fff',
        },
        iconPlayBasMobile: {
            fontSize: '1.5em',
            color: theme.palette.background.grey,
            position: 'absolute',
            bottom: '30px',
            left: '20px',
            color: '#1E2327',
            backgroundColor: '#fff',
            borderRadius: '100px',
            padding: '15px',
            marginRight:'15px'

        },
        playerTexteBasMobile: {
            fontSize: '1em',
            fontWeight: '600',
            position: 'absolute',
            bottom: '47px',
            left: '80px',
            color: '#fff',
        },

        poste: {
            
            fontSize: '2.250em',
            fontWeight: '600',
            position: 'absolute',
            top: '40px',
            left: '30px',
            right: '40px',
            color: '#fff',
            textAlign:'left',
            lineHeight : '40px',
            marginBottom : '40px',
            padding:'10px'
        },
        posteMobile: {
            // backgroundColor :'#000',
            // opacity:'0.5',
            fontSize: '1.250em',
            fontWeight: '600',
            position: 'absolute',
            top: '7px',
            left: '45px',
            right: '10px',
            color: '#fff',
            textAlign:'left',
            lineHeight : '20px',
            marginBottom : '20px',
            padding:'10px'
        },
        containerPoste:{
            
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            padding: theme.spacing(2),
            width: '75%',
        },
        posteEntreprise: {
            
            fontSize: '0.7em',
            fontWeight: '600',
            color: '#fff',
        },
        sticky: {
            fontSize: '1.5em',
            fontWeight: '500',
            position: 'fixed',
            top: 'calc(10% - 0.5em)',
            left: 'calc(95% - 0.5em)',
            textAlign: 'left',
        },
        listeCompetences:{
            fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
            fontWeight: '300',
            fontSize: '1em',
            lineHeight:'2em',
            color: '#1E2327',

        },
        ulListeCompetences:{
            paddingBottom:'30px',
        }
      
})

const { publicRuntimeConfig } = getConfig()

function OffreDetail(props) {
    let { classes, offre, isCandidature } = props;
    const logoUrl = (offre.company ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + offre.company.logo : "/static/images/defaultdefault_picture_company.svg/")
    const DefaultUrl = "/static/images/default/default_picture_company.svg"
    const imgUrl = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[2]) ? offre.company.presentation_video.thumbnails[0].sizes[2].link : DefaultUrl
    const imgUrlDesktop = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[4]) ? offre.company.presentation_video.thumbnails[0].sizes[4].link : DefaultUrl
    const imgUrlOffre = (offre && offre.video && offre.video.thumbnails && offre.video.thumbnails[0] && offre.video.thumbnails[0].sizes[2]) ? offre.video.thumbnails[0].sizes[2].link : DefaultUrl
    const imgUrlDesktopOffre = (offre && offre.video && offre.video.thumbnails && offre.video.thumbnails[0] && offre.video.thumbnails[0].sizes[4]) ? offre.video.thumbnails[0].sizes[4].link : DefaultUrl
    const imgUrlTerritoire = (offre.territories && offre.territories[0] && offre.territories[0].territory && offre.territories[0].territory.presentation_video.thumbnails && offre.territories[0].territory.presentation_video.thumbnails[0] && offre.territories[0].territory.presentation_video.thumbnails[0].sizes[2]) ? offre.territories[0].territory.presentation_video.thumbnails[0].sizes[2].link : DefaultUrl
    const imgUrlDesktopTerritoire = (offre.territories && offre.territories[0] && offre.territories[0].territory.presentation_video && offre.territories[0].territory.presentation_video.thumbnails && offre.territories[0].territory.presentation_video.thumbnails[0] && offre.territories[0].territory.presentation_video.thumbnails[0].sizes[4]) ? offre.territories[0].territory.presentation_video.thumbnails[0].sizes[4].link : DefaultUrl
    const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}`;
    const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`);
    const territoryVideoUrlTab = (offre.territories && offre.territories[0] && offre.territories[0].territory) ? offre.territories[0].territory.presentation_video.cdn_url.split('/') : '';
    const territoryVideoId = territoryVideoUrlTab[2]
    let descriptionSEO = ""
    let titleSEO = ""
    offre.company.brand_name ? descriptionSEO += offre.company.brand_name : ""
    descriptionSEO +=  " recrute en vidéo un(e) "+offre.title
    titleSEO =  "Offre d'emploi vidéo "+offre.title 
    offre.location.gmap_address.formatted_address ? descriptionSEO += ", "+offre.location.gmap_address.formatted_address : ""
    offre.location.gmap_address.formatted_address ? titleSEO += ", "+offre.location.gmap_address.formatted_address : ""
    offre.company.brand_name ? titleSEO += " - "+offre.company.brand_name : ""
    descriptionSEO +=  ". Envoyez votre candidature en vidéo. "
    titleSEO += " | Talents Tube "
    let jobVille=""
    let jobDpt=""
    let jobPays=""
    let  jobContract =""
    let  tempsType =""
    let  tempsTypeFr =""
    let  nombreHeure =""
    let  dureeContrat =""
    let  teletravail =""
    offre.location.gmap_address.address_components[0] ? jobVille = offre.location.gmap_address.address_components[0].long_name: jobVille=""
    offre.location.gmap_address.address_components[1] ? jobDpt = offre.location.gmap_address.address_components[1].long_name: jobDpt=""
    offre.location.gmap_address.address_components[3] ? jobPays = offre.location.gmap_address.address_components[3].long_name: jobPays=""
    // offre.location.gmap_address ? jobAdr = location.gmap_address.adr_address: jobAdr=""
    offre.extra.contract_type ? jobContract = offre.extra.contract_type : jobContract =""
    offre.extra.temps_type ? tempsType = offre.extra.temps_type : tempsType =""
    console.log("competences!!");
    //console.log(offre.competences);
    var competences = [];
    
    if(offre.competences){
        for (var i = 0; i < offre.competences.length; i++) {
            //console.log(offre.competences[i]);
            console.log("competences "+i);
            console.log(offre.competences[i]);
            
            for (const property in offre.competences[i]) {
                console.log(` ${offre.competences[i][property]}`);
                competences.push(offre.competences[i][property]);
                
            }
        }
    }
    const listItems = competences.map((number) =>
        <li className={classes.listeCompetences}>{number}</li>
    );
    offre.extra.teletravail ? teletravail = offre.extra.teletravail : teletravail =""
    //gestion du type de temps de travail
    if(tempsType=="PART_TIME"){
        tempsTypeFr="Temps partiel"
    }else if(tempsType=="FULL_TIME") {
        tempsTypeFr="Temps plein"
    }else if(tempsType=="MIX_TIME") {

    }
    //gestion du nombre d'heure
    if(offre.extra.nombre_heure && offre.extra.nombre_heure!=0 && tempsType=="PART_TIME"){
        nombreHeure=" ("+offre.extra.nombre_heure+" h/semaine)";
    }
    //gestion de la duree de contrat
    if(offre.extra.duree_contrat && offre.extra.duree_contrat!=0 && jobContract=="CDD"){
        dureeContrat=" ("+offre.extra.duree_contrat+" mois)";;
    }
    //gestion du télétravail
    if(offre.extra.teletravail=='tele_occasionel'){
        teletravail='Télétravail occasionel';
    }else if(offre.extra.teletravail=='tele_partiel'){
        teletravail='Télétravail partiel';
    }else if(offre.extra.teletravail=='tele_total'){
        teletravail='Télétravail total';
    }
    
    const imgDefaultUrl = "/static/images/default/default_picture_company.svg"
    {/* CONST MARQUE EMPLOYEUR */}
    const marqueEmployeur = offre.company.presentation_video && !offre.is_promoted && (
        <div className={classes.container + ' ' + classes.discoverContainerCompany}>
            <section>
                

                {/* <a href={entrepriseLink}> */}
                {/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
               
                <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&type=Entreprise`} >   
                    <div className={classes.discoverContainerImage}>
                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
                        <Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntreprise} align="center">
                            Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
                        </Typography>
                        <KeyboardArrowleftIcon className={classes.iconPlayBas} />
                        <Typography variant="h3" component="h3" className={classes.playerTexteBas}>
                            Lire la vidéo
                        </Typography>
                    </div>
                </Link>
                {/* </a> */}
            </section>
        </div>
    )
    {/* FIN CONST MARQUE EMPLOYEUR */} 
    {/* CONST TERRITOIRE */} 
    
    {/* FIN CONST TERRITOIRE */} 
    {/* CONST DESCRIPTIF */} 
    const descriptif = <section>
        <Typography variant="h1" component="h1" gutterBottom className={classes.title}>
            Descriptif de l’annonce 
        </Typography>
        {/* <SimpleCollapse> */}
        <Typography gutterBottom className={classes.contentText}>
            <div
            dangerouslySetInnerHTML={{
                __html: offre.description
            }}></div>
        </Typography></section>
    {/* FIN CONST DESCRIPTIF */}
    {/* CONST COMPETENCES */} 
    const competencesAffichage = competences.length>0  && (
        <section >
            <Typography variant="h2" component="h2" gutterBottom className={classes.title}>
            Compétences recherchées
            </Typography> 
            <ul className={classes.ulListeCompetences}>{listItems}</ul>
            
        </section> 
    ) 
    {/*FIN CONST COMPETENCES */}       
    return (
        
        <Fragment>
            {/* {offre.public_tag.map((label, index) => {
                 descriptionSEO += label+", "
            })} */}
            {/* PARTIE REFERECEMENT GENERAL (FACEBOOK, GOOGLE, TWITTER LINKENDIN) */}   
            <OgHead seo_title={titleSEO}
                seo_description={descriptionSEO}
                seo_url={socialShareUrl}
                image={imgUrlDesktop}
            ></OgHead>
            {/* PARTIE REFERENCEMENT GOOGLE JOBS */}   
            <JobPosting job_title={offre.title}
                job_description={offre.description}
                job_brand= {offre.company.brand_name && offre.company.brand_name}
                job_brand_link= {entrepriseLink}
                job_title = {offre.title}
                job_location = {offre.location.gmap_address.formatted_address}
                job_ville = {jobVille}
                job_dept = {jobDpt}
                job_pays = {jobPays}
                job_adr = {offre.location.gmap_address.formatted_address}
                job_date = {offre.published_at}
                job_date_fin = {offre.unpublished_at}
                job_temps_type= {tempsType}
                job_contract_type= {jobContract}
            ></JobPosting>
            <Hidden smDown>
            {/* PARTIE DESKTOP */}   
            <div style={{ width:'100%', justifyContent: 'center', display: 'flex', marginTop:'40px'  }}>
                <div style={{ width:'1200px' }}>
                    <div style={{  display: 'flex', alignItems: 'flex-start' }}>
                        <div style={{width:'67%' }}>
                            {offre.video && (
                            
                                <Fragment>
                                    <Suspense fallback={renderLoader()}>   
                                        {/* <VideoVimeo  {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' /> */}
                                        <div className={classes.contentContainer}>
                                            
                                            <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&type=Offre`} >   
                                                    <div className={classes.discoverContainerImage}>
                                                        <img  src={isWidthUp('sm', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
                                                        <div className={classes.containerPoste}>
                                                        
                                                            <Typography variant="h1" component="h1" gutterBottom className={classes.poste}>
                                                                {offre.title}  <br></br>
                                                                <span className={classes.posteEntreprise}>{offre.company.brand_name  ? offre.company.brand_name  : ""}</span>
                                                            </Typography>
                                                            
                                                        </div>
                                                        <KeyboardArrowleftIcon className={classes.iconPlay} />
                                                        <Typography variant="h3" component="h3" className={classes.playerTexte}>
                                                            Lire la vidéo
                                                        </Typography>
                                                    </div>
                                            </Link>         
                                        </div>        
                                    </Suspense>         
                                    <div className={classes.container}>
                                        

                                        {/* PARTIE DETAIL ANNONCE */}            
                                        <div className={classes.contentContainer}>
                                            {/* PARTIE DESCRIPTIF */}
                                            {descriptif}
                                                {/* <section className={classes.tagsContainer}>
                                                    {offre.public_tag.map((label, index) => {
                                                        return (
                                                            <Chip label={label} className={classes.tags} key={index} />
                                                        );
                                                    })}
                                                </section> */}
                                            {/* </SimpleCollapse> */}
                                            {/* PARTIE compétences */}
                                            {competencesAffichage}
                                            
                                        </div>
                                    </div>
                                    {/* PARTIE MARQUE EMPLOYEUR */}
                                    {offre.company.presentation_video && !offre.is_promoted && (
                                        <div className={classes.container + ' ' + classes.discoverContainerCompany}>
                                            <section>
                                                

                                                {/* <a href={entrepriseLink}> */}
                                                {/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
                                            
                                                <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&type=Entreprise`} >   
                                                    <div className={classes.discoverContainerImage}>
                                                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
                                                        <Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntreprise} align="center">
                                                            Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
                                                        </Typography>
                                                        <KeyboardArrowleftIcon className={classes.iconPlayBas} />
                                                        <Typography variant="h3" component="h3" className={classes.playerTexteBas}>
                                                            Lire la vidéo
                                                        </Typography>
                                                    </div>
                                                </Link>
                                                {/* </a> */}
                                            </section>
                                        </div>
                                    )}
                                    {/* PARTIE TERRITOIRE DESKTOP*/}
                                    {offre.territories && territoryVideoId && (
                                        <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
                                            <section>
                                                <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&type=Territoire`} >   
                                                    <div className={classes.discoverContainerImage}>
                                                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
                                                        <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoire} align="center">
                                                            Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
                                                        </Typography>
                                                        <KeyboardArrowleftIcon className={classes.iconPlayBas} />
                                                        <Typography variant="h3" component="h3" className={classes.playerTexteBas}>
                                                            Lire la vidéo
                                                        </Typography>
                                                    </div>
                                                </Link>
                                            </section>
                                        </div>
                                    )} 
                                </Fragment>
                            )}
                        </div>
                        {/* PARTIE STICKY */}
                        
                            <StickyBox style={{width:'33%', marginLeft:'40px', padding : '0 15px'}}>
                                     
                                    <section className={classes.stickyContainer}>
                                        <a href={entrepriseLink} className={classes.lien}>
                                            <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
                                                                    src={logoUrl} alt={offre.company.brand_name && offre.company.brand_name} />    
                                        </a>
                                        <Typography variant="h4" component="h4" className={classes.stickyTitle}>
                                            {offre.title}
                                        </Typography>
                                        <a href={entrepriseLink} className={classes.lien}>
                                            <Typography variant="h5" component="h5" className={classes.stickyEntreprise}>
                                            {offre.company.brand_name && offre.company.brand_name}
                                            </Typography>
                                        </a>
                                    </section>
                                
                                    <section className={classes.IconTextContainerDesktop}>
                                        
                                        <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type+dureeContrat} />
                                        {tempsTypeFr ?<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr+nombreHeure } />:""}
                                        <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />
                                        {teletravail && (<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="home" text={teletravail} /> )} 
                                        {offre.beneficiaire && (<IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} /> )} 
                                    </section>
                                
                                    <section >&nbsp;
                                    </section>    
                                {!offre.is_promoted && (
                                    <div className={classes.shareContainer}>
                                        <a href={`/Reponse?adId=${offre.id}`} className={classes.lien}>
                                            <Button
                                                cyp="ButtonApply"
                                                variant="contained"
                                                className={classes.button}

                                >Postuler </Button>
                                        </a>
                                        
                                        
                                        <Typography gutterBottom className={classes.contentShare}>
                                            Partager l'offre sur votre réseau
                                        </Typography>
                                        <section className={classes.ShareIcons}>
                                            <SocialShare url={socialShareUrl} />
                                        </section>
                                    </div>
                                )}
                                {offre.is_promoted && (
                                    <section className={classes.pourvu}>
                                        <Button variant="contained" disabled className={classes.pourvuButton}>
                                        Offre pourvue
                                        </Button>
                                    </section>
                                    // <Chip label="Pourvue" className={classes.chip} />
                                )}
                            </StickyBox>
                       
                    </div>
                </div>
            </div>
            </Hidden>                        
            {/* PARTIE MOBILE */}   
            <Hidden mdUp>
                <section className={classes.contentContainer}>
                                            
                    <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&type=Offre`} >   
                            <div className={classes.discoverContainerImage}>
                                <img  src={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
                                <div className={classes.containerPoste}>
                                
                                    <Typography variant="h1" component="h1" gutterBottom className={classes.posteMobile}>
                                        {offre.title}  <br></br>
                                        <span className={classes.posteEntreprise}>{offre.company.brand_name  ? offre.company.brand_name  : ""}</span>
                                    </Typography>
                                    
                                </div>
                                <KeyboardArrowleftIcon className={classes.iconPlayMobile} />
                                <Typography variant="h3" component="h3" className={classes.playerTexteMobile}>
                                    Lire la vidéo
                                </Typography>
                            </div>
                        </Link>         
                </section>
                <section className={classes.headerContainerMobile}>
                    <div >

                        <a href={entrepriseLink} className={classes.lien}>
                            <Avatar className={classes.logoMobile} classes={{ img: classes.MuiAvatarImg }}
                                src={logoUrl} alt="companylogo" />
                        </a>

                    </div>
                    <div className={classes.infoContainerMobile}>
                        <Typography gutterBottom variant="h5" component="h1" className={classes.title}>
                            {offre.title}
                        </Typography>
                        <a href={entrepriseLink}  className={classes.lien}>
                            <Typography gutterBottom variant="subtitle1" className={classes.text}>
                                {offre.company.brand_name && offre.company.brand_name} 
                            </Typography>
                        </a>
                        {/* ville */}
                    </div>
                </section>
                <section className={classes.IconTextContainerMobile}>
                    {offre.is_promoted && (<Chip label="Offre pourvue" className={classes.chip} />)}
                    {offre.extra && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type+dureeContrat} />)}
                    {tempsTypeFr && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr+nombreHeure} />)}
                    {offre.location && offre.location.gmap_address && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />)}
                    {teletravail && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="home" text={teletravail} />)}
                    {offre.beneficiaire  && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} />)} 
                </section>
                <section className={classes.IconTextContainerMobile}>
                    {/* PARTIE DESCRIPTIF */}
                    {descriptif}
                    {/* PARTIE competences */}                
                    {competencesAffichage}
                </section>
                <section>
                    {/* PARTIE MARQUE EMPLOYEUR MOBILE*/}
                    {offre.company.presentation_video && !offre.is_promoted && (
                        <div className={classes.container + ' ' + classes.discoverContainerCompany}>
                            <section>
                                

                                {/* <a href={entrepriseLink}> */}
                                {/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
                            
                                <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&type=Entreprise`} >   
                                    <div className={classes.discoverContainerImage}>
                                        <img src={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
                                        <Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntrepriseMobile} align="center">
                                            Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
                                        </Typography>
                                        <KeyboardArrowleftIcon className={classes.iconPlayBasMobile} />
                                        <Typography variant="h3" component="h3" className={classes.playerTexteBasMobile}>
                                            Lire la vidéo
                                        </Typography>
                                    </div>
                                </Link>
                                {/* </a> */}
                            </section>
                        </div>
                    )}
                    {/* PARTIE TERRITOIRE MOBILE*/}
                    {offre.territories && territoryVideoId && (
                        <div className={classes.container + ' ' + classes.discoverContainerTerritory}>
                            <section>
                                <Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&type=Territoire`} >   
                                    <div className={classes.discoverContainerImage}>
                                        <img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
                                        <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoireMobile} align="center">
                                            Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
                                        </Typography>
                                        <KeyboardArrowleftIcon className={classes.iconPlayBasMobile} />
                                        <Typography variant="h3" component="h3" className={classes.playerTexteBasMobile}>
                                            Lire la vidéo
                                        </Typography>
                                    </div>
                                </Link>
                            </section>
                        </div>
                    )}
                </section>
            </Hidden>                        
            
        </Fragment>
    )
}
export default withStyles(styles)(withWidth()(OffreDetail));