
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 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()

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;
        const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}`;
        return (
            <LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
                {/* <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense> */}
                <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense>
            </LayoutOffre>
        );
    }

}

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));
