
import React, { Fragment,lazy, Suspense } from 'react'
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import getConfig from 'next/config'
import { withStyles } from '@material-ui/core/styles';
import OgHead from '../components/atoms/OgHead'
import RootContainer from '../components/atoms/RootContainer'
import LayoutOffre from "../components/templates/LayoutOffre";
// const OffreDetail = lazy(() => import('../components/organisms/OffreDetail'));
import OffreDetail   from "../components/organisms/OffreDetail";
import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
import _ from "lodash/string";
const renderLoader = () => <p>Chargement</p>;
const styles = theme => ({

});

const { publicRuntimeConfig } = getConfig()
let descriptionSEO = ""
let titleSEO = ""


class Offre extends React.Component {
    
    componentDidMount() {
        localStorage.setItem('loginRedirect', window.location.pathname)
        localStorage.setItem('adId', this.props.offre.id)
        this.props.countAdViewRequest(this.props.offre.id);
    }

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

    onVimeoError = (err) => {
        console.error(err);
    }
    render() {
        const { classes, offre } = this.props;
        descriptionSEO=""
        offre.company && offre.company.brand_name ? descriptionSEO += offre.company.brand_name : ""
        descriptionSEO +=  " recrute un(e) "+offre.title+", "+(offre.location && offre.location.gmap_address.formatted_address)+". Envoyez votre candidature vidéo"
        titleSEO =  "Offre d'emploi "+offre && offre.title && offre.title.replace(' (F/H)', '')+", "+(offre.location && offre.location.gmap_address.formatted_address)+". Envoyez votre candidature vidéo"
        const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `Offre/${offre.id}-${_.kebabCase(offre.title)}`;
        const DefaultUrl = "https://blog.talentstube.com/wp-content/uploads/2021/01/default_picture_company.jpg"
        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[3]) ? offre.company.presentation_video.thumbnails[0].sizes[3].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[3]) ? offre.video.thumbnails[0].sizes[3].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
        return (
            <RootContainer>
                <OgHead seo_title={titleSEO}
                seo_description={descriptionSEO}
                seo_url={socialShareUrl}
                image={imgUrlOffre}
            ></OgHead>
           
                <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
                
                {/* <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense> */}
                    <OffreDetail offre={offre}/>
                </LayoutOffre>
            </RootContainer>
        );
    }

}

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

    context.store.dispatch(fetchJobRequest(id))

    return id;
}

function mapStateToProps(state) {
    return {
        offre: state.ad
    };
}

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

export default withStyles(styles)(connect(mapStateToProps, { fetchJobRequest, clearAd, countAdViewRequest})(Offre));
