
import React, { Fragment } from 'react'
import OgHead from '../components/atoms/OgHead';
import Router from 'next/router'
import { connect } from "react-redux"
import PropTypes from 'prop-types'
import getConfig from 'next/config'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
import Avatar from '@material-ui/core/Avatar'
import Chip from '@material-ui/core/Chip'
import OffreRow from "../components/organisms/OffreRow"
import RootContainer from '../components/atoms/RootContainer'
import LayoutCompany from "../components/templates/LayoutCompany"
import Link from 'next/link'
import { fetchCompanyRequest, clearCompany, countCompanyViewRequest } from '../actions/companies'
import IconText from '../components/atoms/IconText'
import IconTextInline from '../components/atoms/IconTextInline'
import SimpleCollapse from '../components/atoms/SimpleCollapse'
import SocialShare from '../components/organisms/SocialShare'
import Loader from '../components/templates/loader'
import _ from "lodash"
import Ar from "lodash/array"
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
import Hidden from '@material-ui/core/Hidden';
import NoResult from '../components/atoms/NoResult';

import StickyBox from "react-sticky-box";
import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';

const renderLoader = () => <p>Chargement</p>;
const styles = theme => ({
    companyContainer: {
        [theme.breakpoints.up('md')]: {
            paddingTop: '5vh',
        },
    },
    primary: {
        color: theme.palette.primary.main,
    },
    root: {
        position: 'relative',
        textAlign: 'center',
        paddingTop: theme.spacing(20),
        justifyContent: 'center',
    },
    container: {
        padding: theme.spacing(0, 3),
        paddingBottom: '10vh',
        marginTop:'10px',
        [theme.breakpoints.up('md')]: {
            padding: '0 30vw',
        },
    },
    containerMobile: {
        padding: theme.spacing(0, 3),
        paddingBottom: '20vh',
        marginTop:'10px',

        [theme.breakpoints.up('md')]: {
            padding: '0 30vw',
        },
    },
    containerTerritoryMobile:{
        marginTop:'50px',
        marginBottom:'50px',
    },
    headerContainer: {
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        margin: theme.spacing(1.5, 0),
    },
    headerContainerDesktop: {
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        margin: theme.spacing(1.5, 0),
        [theme.breakpoints.up('md')]: {
            padding: '0 18vw',
        },
        '& button': {
            marginRight: 0,
        },
    },
    companyInfoContainer: {
        display: 'flex',
    },
    infoContainer: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        margin: theme.spacing(0, 1.5),
        '& a': {
            textDecoration: 'none',
            width: 'min-content',

        },
        '& span': {
            cursor: 'pointer',
        }
    },
    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),
    },
    IconTextContainerDesktop: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: '100%',
    },
    contentContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        margin: theme.spacing(1.5, 0),
    },
    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',
    },
    discoverContainerOffers: {
        backgroundColor: theme.palette.background.grey,
        paddingBottom: theme.spacing(7),
        minHeight: '30vh',
        '& section': {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: theme.palette.background.grey,
        },
        [theme.breakpoints.up('md')]: {
            paddingTop: theme.spacing(2),
            paddingBottom: theme.spacing(2),
        },
    },
    discoverContainerImage: {
        position: 'relative',
    },
    discoverContainerTerritory: {
        backgroundColor: theme.palette.background.grey,
        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.15)',
        transition: 'box-shadow ease-out',
        '&:hover': {
            boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
            transition: 'box-shadow 2s',
        },
    },

    logo: {
        width: 'inherit',
        height: '100%',
        objectFit: 'contain',
        borderRadius: '0.25em',
    },
    MuiAvatarImg: {
        objectFit: 'contain',
    },
    video: {
        display: 'flex',
        flexDirection: 'column',
        height: '33vh',
        [theme.breakpoints.up('md')]: {
            padding: '0 18vw',
            height: 'auto',
        },
    },
    title: {
        fontSize: '1em',
        fontWeight: '500',
    },
    titleBorder: {
        '&:after': {
            content: '""',
            width: '15px',
            borderBottom: 'solid 2px',
            borderColor: theme.palette.primary.main + '!important',
            display: 'flex',
        },
    },
    text: {
        [theme.breakpoints.up('md')]: {
            fontSize: '1.2em',
        },
    },
    discoverTitle: {
        padding: theme.spacing(3, 0),
        textAlign: 'center',
    },
    contentText: {
        fontSize: '1em',
        fontWeight: '300',
        padding: theme.spacing(1, 0),
        whiteSpace: 'pre-line',
        textAlign: 'justify',
    },
    contentCondition: {
        fontSize: '1em',
        fontWeight: '300',
        textTransform: 'uppercase',
        textAlign: 'center',
        padding: theme.spacing(1.5, 0),
    },
    contentShare: {
        fontSize: '1em',
        fontWeight: '500',
        textAlign: 'center',
    },
    companyName: {
        fontSize: '0.9em',
        fontWeight: '300',
    },
    iconText: {
        marginLeft: 0,
        justifyContent: 'flex-start',
        padding: theme.spacing(0.25, 0),
    },
    iconTextDesktop: {
        marginLeft: 0,
        justifyContent: 'flex-start',
        padding: theme.spacing(0.25, 0),
        width: 'inherit',
    },
    iconTextIcon: {
        color: theme.palette.offerlistitem.icon,
        fontSize: '1em',
        marginRight: theme.spacing(1),
    },
    iconTextText: {
        fontWeight: 'lighter',
        color: theme.palette.secondary.text,
        fontSize: '0.9em',
        paddingLeft: theme.spacing(1),
    },
    iconTextTextDesktop: {
        fontWeight: 'lighter',
        color: theme.palette.offerlistitem.text,
        fontSize: '0.9em',
        paddingLeft: theme.spacing(1),
        width: '100%',
    },
    iconPlay: {
        fontSize: '3.5em',
        color: theme.palette.background.grey,
        position: 'absolute',
        top: 'calc(50% - 0.5em)',
        left: 'calc(50% - 0.5em)',
    },
    websiteLink: {
        textDecoration: 'none',
        color: theme.palette.secondary.text,
    },
    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,
        alignSelf: 'center',
        textDecoration:'none',
        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    },
    voirOffre: {
        textTransform: 'inherit',
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        padding: theme.spacing(1.2, 2),
        color: '#BBBCBD',
        backgroundColor: '#F3F3F4',

    },
    buttonContainer: {
        alignItems: 'right',
    },
    chip: {
        color: theme.palette.secondary.main,
        backgroundColor: theme.palette.primary.main,
        margin: theme.spacing(1, 0),
        fontSize: '1em',
        width: 'fit-content',
    },
    chipHeader: {
        '&:hover, &:active, &:focus': {
            backgroundColor: theme.palette.primary.main,
            boxShadow: 'inherit',
        },

    },
    card: {
        margin: theme.spacing(3, 0),
    },
    discoverTitle: {
        paddingTop: theme.spacing(2),
        '& span': {
            color: theme.palette.primary.main,
        }
    },
    videoVimeo: {
        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',
    },
    lien:{
        textDecoration:'none'
    },
    lien:{
        textDecoration:'none'
    },
    container: {
        padding: theme.spacing(0, 3),
        [theme.breakpoints.up('md')]: {
            padding: '10px 5px',
        },
    },
    headerContainer: {
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        margin: theme.spacing(0, 0),
    },
    headerContainerMobile: {
        display: 'inline',
        // 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',
        padding: '20px',
        '& 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: {
        alignItems: 'center',
        // justifyContent: 'flex-start',
        
        borderTop: '1px solid #E8E8E9',
        borderBottom: '1px solid #E8E8E9',
        padding: '20px',
        

    },
    contentContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        top:'40px',
        margin: theme.spacing(0, 1),
    },
    contentContainerMobile: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        top:'100px',
        paddingTop:'100px',
        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',
        },
    },
    discoverOffres: {
        color: "#1E2327",
        fontSize: "1.875em",
        marginTop: "10px",
        fontWeight: "600",
        marginBottom: "20px",
        paddingRight: "20px",

    },
    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: '0px',
        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 : '1.5em',
        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: '50px',
            left: '20px',
            color: '#1E2327',
            backgroundColor: '#fff',
            borderRadius: '100px',
            padding: '10px',
            marginRight:'15px'

        },
        playerTexteMobile: {
            
            fontSize: '1em',
            fontWeight: '600',
            position: 'absolute',
            bottom: '63px',
            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: '30px',
            left: '30px',
            right: '30px',
            color: '#fff',
            textAlign:'left',
            lineHeight : '20px',
            marginBottom : '20px',
            
        },
        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 CustomTableBody = ({ rowIds, Row, style, className }) => (
    <div style={style} className={className}>
        {rowIds && rowIds.valueSeq().map(r => <Row key={r} griddleKey={r} />)}
    </div>
);

const { publicRuntimeConfig } = getConfig()
class Entreprise extends React.Component {
    state = {
        loading: true,
    };

    componentDidMount() {
        localStorage.setItem('loginRedirect', window.location.pathname)
        this.props.countCompanyViewRequest(this.props.company.id);
    }

    componentWillUnmount() {
        this.props.clearCompany()
    }

    onVimeoError = (err) => {
        console.error(err);
    }

    render() {
        const { classes, company } = this.props;
        const logoUrl = (company.logo ? publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + company.logo : publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg")
        
        const DefaultUrl = publicRuntimeConfig.symphonyUrl + "img/default_picture_svg"
        const DefaultUrlSEO = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"
        const imgUrl = (company.presentation_video && company.presentation_video.thumbnails[0] && company.presentation_video.thumbnails[0].sizes[3]) ? company.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
        const imgUrlDesktop = (company.presentation_video && company.presentation_video.thumbnails[0] && company.presentation_video.thumbnails[0].sizes[3]) ? company.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
        const imgUrlDesktopSEO = (company.presentation_video && company.presentation_video.thumbnails[0] && company.presentation_video.thumbnails[0].sizes[3]) ? company.presentation_video.thumbnails[0].sizes[3].link : DefaultUrlSEO
        const imgUrlTerritoire = (company.territories && company.territories[0] && company.territories[0].territory && company.territories[0].territory.presentation_video.thumbnails && company.territories[0].territory.presentation_video.thumbnails[0] && company.territories[0].territory.presentation_video.thumbnails[0].sizes[3]) ? company.territories[0].territory.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
        const imgUrlDesktopTerritoire = (company.territories && company.territories[0] && company.territories[0].territory.presentation_video && company.territories[0].territory.presentation_video.thumbnails && company.territories[0].territory.presentation_video.thumbnails[0] && company.territories[0].territory.presentation_video.thumbnails[0].sizes[3]) ? company.territories[0].territory.presentation_video.thumbnails[0].sizes[3].link : DefaultUrl
        const offre = (company.count_ads == 1) ? company.count_ads + ' offre' : company.count_ads + ' offres'
        const nbOffre = (company.count_ads > 0) ? offre : 'Candidature spontanée'

        const territoryVideoUrlTab = (company.territories[0] && company.territories[0].territory) ? company.territories[0].territory.presentation_video.cdn_url.split('/') : '';
        const territoryVideoId = territoryVideoUrlTab[2]

        const NewLayout = ({ Table }) => (
            <div>
                <Table />
            </div>
        );

        const rowDataSelector = (state, { griddleKey }) => {
            return state
                .get("data")
                .find(rowMap => rowMap.get("griddleKey") === griddleKey)
                .toJSON()
        }

        const { loading } = this.state;
        const descriptionCompany = company.brand_name ? company.brand_name : "";
        const socialShareUrl = typeof window !== 'undefined' ? window.location
            : publicRuntimeConfig.frontServerUrl + `/Entreprise/${company.id}-${_.kebabCase(company.brand_name)}`;
        const descriptionVille = company.addresses.billing.city ? company.addresses.billing.city : "";
        
        const offres = ""
        let sizeText= "";
        sizeText = company.extra.size==1 ? sizeText="Moins de 9 salariés" : company.extra.size==10 ? sizeText="De 10 à 249 salariés" :(company.extra.size==250) ? sizeText="De 250 à 4999 salariés" :  (company.extra.size==5000) ? sizeText="Plus de 5000 salariés" : sizeText=""
                                                            
        
        return (
            <RootContainer>
                <OgHead seo_title={company.brand_name && company.brand_name+" recrute des candidats en vidéo"}
                    seo_description={"Découvrez l'entreprise "+descriptionCompany +" et ses offres d'emploi en vidéo - "+descriptionVille+ ". Envoyez votre candidature spontanée en vidéo."}
                    seo_url={socialShareUrl}
                    image={imgUrlDesktopSEO}
                ></OgHead>
            <LayoutCompany backLink="/Entreprises" companyId={company.id} companyLibelle={descriptionCompany}>
                
                {(!_.isEmpty(company.ads) || company.presentation_video) && (
                    <div >
                        <Hidden smDown>
                            {/* PARTIE DESKTOP */}   
                            <div style={{ width:'100%', justifyContent: 'center', display: 'flex', marginTop:'100px'  }}>
                                <div style={{ width:'1200px' }}>
                                    <div style={{  display: 'flex', alignItems: 'flex-start' }}>
                                        <div style={{width:'67%' }}>
                                            <Fragment>
                                                {/* {company.presentation_video &&  <Suspense fallback={renderLoader()}><VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' /></Suspense>} */}
                                                <div className={classes.contentContainer}>
                                                    {company.presentation_video &&
                                                    <Link href={`/Player?id=${company.id}&url=/Entreprise/${company.id}-${_.kebabCase(company.brand_name)}&videoId=${Ar.last(_.split(company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${company.brand_name}&nameOffre=`} >   
                                                            <div className={classes.discoverContainerImage}>
                                                                <img  src={ imgUrl} alt={company.brand_name && company.brand_name} />
                                                                <div className={classes.containerPoste}>
                                                                
                                                                    <Typography variant="h4" component="h4" gutterBottom className={classes.poste}>
                                                                        {company.brand_name && company.brand_name}  <br></br>
                                                                        
                                                                    </Typography>
                                                                    
                                                                </div>
                                                                <KeyboardArrowleftIcon className={classes.iconPlay} />
                                                                <Typography variant="h3" component="h3" className={classes.playerTexte}>
                                                                    Lire la vidéo
                                                                </Typography>
                                                            </div>
                                                    </Link> 
                                                    }        
                                                </div>
                                                <div className={classes.container}>
                                                    <div className={classes.contentContainer}>
                                                        <Typography gutterBottom className={classes.title }>
                                                            Présentation
                                                        </Typography>
                                                        <Typography gutterBottom className={classes.contentText}>
                                                            {company.description}
                                                        </Typography>
                                                    </div>
                                                    <div className={classes.container}>
                                                    {
                                                        !_.isEmpty(company.ads) ? (
                                                            <div className={classes.container } id="discover">
                                                                <Typography gutterBottom component="h2" className={classes.discoverOffres}>
                                                                    Les offres d'emploi pour <span>{company.brand_name && company.brand_name}</span>
                                                                </Typography>
                                                                {company.loading ?
                                                                    (<Loader />)
                                                                    : 
                                                                        
                                                                        _.filter(company.ads, { 'status': 'PUBLISHED' }).map((ad, index) => {
                                                                            return (
                                                                                <OffreRow rowData={ad} company={company}  key={index} />
                                                                            );
                                                                        })
                                                                    }
                                                            </div>
                                                        ) : ''
                                                    }
                                                    </div>
                                                    <div className={classes.container}>
                                                    {
                                                        !_.isEmpty(company.territories) ? (
                                                            <div className={classes.container}>
                                                                <section>
                                                                    <Link href={`/Player?id=${company.territories[0].territory.id}&url=/Entreprise/${company.id}-${_.kebabCase(company.brand_name)}&videoId=${territoryVideoId}&typeEntite=Territoire&nameCompany=${company.territories[0].territory.brand_name}&nameOffre=`} >   
                                                                        <div className={classes.discoverContainerImage}>
                                                                            <img src={isWidthUp('sm', this.props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!company.territories) ? company.territories[0].territory.brand_name : ''} />
                                                                            <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoire} align="center">
                                                                                Découvrir le territoire {(company.territories) ? company.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>
                                                        ) : ''
                                                    }
                                                    </div>
                                                </div>
                                            </Fragment>
                                        </div>
                                        <StickyBox offsetTop={100} style={{width: '33%', marginLeft: '40px', padding: '0px 15px', position: 'sticky', top: '100px'}}>
                                     
                                            <section className={classes.stickyContainer}>
                                                
                                                <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl} alt="companylogo" />
                                                <Typography variant="h4" component="h4" className={classes.stickyTitle}>
                                                        {company.brand_name && company.brand_name}
                                                </Typography>
                                            </section>
                                        
                                            <section className={classes.IconTextContainerDesktop}>
                                                    <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={company.addresses.billing.city} />
                                                    {(company.website) ?
                                                        (
                                                            <a  href={!!company.website ? company.website : "website"} target="_blank" rel="noopener" className={classes.websiteLink}><IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={!!company.website ? company.website : "website"} /></a>
                                                        )
                                                        : ''
                                                    }

                                                    {(company.extra.size) ?
                                                        (
                                                            
                                                            <IconTextInline classes={{ icon: classes.iconTextIcon, text: classes.iconTextText }} variant="people" text={sizeText} />
                                                        )
                                                        : ''
                                                    }

                                                     

                                            </section>
                                            <section >&nbsp;
                                            </section>         
                                            <div className={classes.shareContainer}>
                                                    <a
                                                    href={`/Reponse?companyId=${company.id}`}
                                                    variant="contained"
                                                    className={classes.lien}
                                                    classes={{ root: classes.rootButton }}>
                                                        <Button
                                                            cyp="ButtonApply"
                                                            variant="contained"
                                                            className={classes.button}
                                                            onClick={() => Router.push(`/Reponse?companyId=${companyId}`)}
                                                        >
                                                        Postuler
                                                        </Button>
                                                    </a>
                                                    <Typography gutterBottom className={classes.contentShare}>
                                                        Partager l'entreprise sur votre réseau
                                                </Typography>
                                                    <section className={classes.ShareIcons}>
                                                        <SocialShare url={socialShareUrl} />
                                                    </section>
                                            </div>
                                        </StickyBox>
                                    </div>
                                </div>
                            </div>  
                        </Hidden>
                        {/* PARTIE MOBILE */}
                        
                        <Hidden mdUp>
                            <section className={classes.contentContainerMobile}>
                            {company.presentation_video &&
                                <Link href={`/Player?id=${company.id}&url=/Entreprise/${company.id}-${_.kebabCase(company.brand_name)}&videoId=${Ar.last(_.split(company.presentation_video.cdn_url, '/'))}&typeEntite=Entreprise&nameCompany=${company.brand_name}&nameOffre=`} >   
                                        <div className={classes.discoverContainerImage}>
                                            <img  src={isWidthUp('xs', this.props.width) ? imgUrlDesktop : imgUrl} alt={company.brand_name && company.brand_name} />
                                            <div className={classes.containerPoste}>
                                            
                                                <Typography variant="h4" component="h4" gutterBottom className={classes.posteMobile}>
                                                    {company.brand_name && company.brand_name}  <br></br>
                                                    
                                                </Typography>
                                                
                                            </div>
                                            <KeyboardArrowleftIcon className={classes.iconPlayMobile} />
                                            <Typography variant="h3" component="h3" className={classes.playerTexteMobile}>
                                                Lire la vidéo
                                            </Typography>
                                        </div>
                                    </Link> 
                                }  
                                {/* <div className={classes.logoContainer}>
                                    <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl} alt="companylogo" />
                                </div> */}
                                {/* <div className={classes.infoContainer}>
                                    <Typography gutterBottom className={classes.text}>
                                        {company.brand_name && company.brand_name}
                                    </Typography>
                                    {(nbOffre != 'Candidature spontanée') ?
                                        (
                                            <a href="#discover" className={classes.discoverAnchor}>
                                                <Chip label={nbOffre} className={classes.chip + ' ' + classes.chipHeader} />
                                            </a>
                                        )
                                        :
                                        (<Chip label={nbOffre} className={classes.chip + ' ' + classes.chipHeader} />)
                                    }
                                    
                                </div> */}
                            </section>
                            <section className={classes.headerContainerMobile}>
                                <div className={classes.infoContainerMobile}>

                                                <Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }} src={logoUrl} alt="companylogo" />
                                                <Typography variant="h4" component="h4" className={classes.stickyTitle}>
                                                        {company.brand_name && company.brand_name}
                                                </Typography>

                                </div>
                            </section>
                            <section className={classes.IconTextContainerMobile}>
                                    {(company.addresses.billing.city) ?
                                        (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={company.addresses.billing.city} />)
                                        : ''
                                    }
                                    {(company.website) ?
                                        (
                                            <a  href={company.website} className={classes.websiteLink} rel="noopener" target="_blank" rel="noopener">
                                                <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={!!company.website ? company.website : "website"} />
                                            </a>
                                        )
                                        : ''
                                    }
                                    {(company.extra.size) ?
                                        (
                                            
                                            <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="people" text={sizeText} />
                                        )
                                        : ''
                                    }
                            </section>
                            <section className={classes.IconTextContainerMobile}>
                                {/* PARTIE DESCRIPTIF */}
                                <Typography gutterBottom className={classes.title }>
                                    Présentation
                                </Typography>
                                <Typography gutterBottom className={classes.contentText}>
                                    {company.description}
                                </Typography>
                                
                            </section>
                            <section>
                            
                            {
                                !_.isEmpty(company.ads) ? (
                                    <div className={classes.containerMobile }>
                                    <div  id="discover">
                                        <Typography gutterBottom component="h2" className={classes.discoverOffres}>
                                            Les offres d'emploi pour <span>{company.brand_name && company.brand_name}</span>
                                        </Typography>
                                        {company.loading ?
                                            (<Loader />)
                                            : 
                                                
                                                _.filter(company.ads, { 'status': 'PUBLISHED' }).map((ad, index) => {
                                                    return (
                                                        <OffreRow rowData={ad} company={company}  key={index} />
                                                    );
                                                })
                                            }
                                    </div>
                                    </div>
                                ) : ''
                            }
                            
                            </section>
                            <section>
                            
                            {
                                !_.isEmpty(company.territories) ? (
                                    <div className={classes.containerMobile}>
                                        <section>
                                            <Link href={`/Player?id=${company.territories[0].territory.id}&url=/Entreprise/${company.id}-${_.kebabCase(company.brand_name)}&videoId=${territoryVideoId}&typeEntite=Territoire&nameCompany=${company.territories[0].territory.brand_name}`} >   
                                                <div className={classes.discoverContainerImage}>
                                                    <img src={isWidthUp('sm', this.props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!company.territories) ? company.territories[0].territory.brand_name : ''} />
                                                    <Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirTerritoire} align="center">
                                                        Découvrir le territoire {(company.territories) ? company.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>
                    </div>
                )}
            </LayoutCompany>
            </RootContainer>
        );
    }

}

Entreprise.getInitialProps = function (context) {
    const { id } = context.query

    context.store.dispatch(fetchCompanyRequest(id))

    return id
}

function mapStateToProps(state) {
    return {
        company: state.company
    };
}

Entreprise.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(connect(mapStateToProps, { fetchCompanyRequest, clearCompany, countCompanyViewRequest })(Entreprise));
