import React, { Component, Fragment,lazy, Suspense,  useEffect  } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography'
import LayoutBackUrl from '../components/templates/LayoutBackUrl';
import RootContainer from '../components/atoms/RootContainer'
import Router from 'next/router';
import Head from 'next/head'
// const VideoVimeo = lazy(() => import('../components/atoms/VideoVimeo'));
import VideoVimeo from '../components/atoms/VideoVimeo';
import queryString from 'query-string';
import { fetchJobRequest, clearAd, countAdViewRequest } from '../actions/ads'
const renderLoader = () => <p>Chargement</p>;
import { NextSeo } from 'next-seo';
import dynamic from 'next/dynamic'
const styles = theme => ({
    player: {
        background:'#1E2327',
        height: '100%'
    },
    container: {
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        height: '100%',
        padding: '0 10px',
    },
    bottomContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignSelf: 'center',
        justifyContent: 'center',
        position: 'absolute',
        bottom: 0,
    },
    title: {
        fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
        fontSize: '1.5em',
        fontWeight: '600',
        padding: theme.spacing(3, 0),
    },
    text: {
        fontSize: '1em',
        fontWeight: '300',
        padding: theme.spacing(1, 0),
        whiteSpace: 'pre-line',
    },
    video: {
        width:"100%",
        height:"100%",
        [theme.breakpoints.up('md')]: {
            paddingBottom: '35%', /* 16:9 */
        },
    }
})

let params = dynamic( () => window.location.search, {ssr: false} )
class Player extends Component {
    constructor(props)
    {
        super(props);
        var today = new Date(),
            date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

        this.state = {
            date: date
        };
        
        console.log("LOCATION SEARCH");
        console.log(params);
    }
    render() {
        const { classes, id, url, typeEntite, videoId, nameCompany, nameOffre } = this.props
        
        
        console.log(id);
        console.log(typeEntite);
        let typeVideo= null;
        let titleVideo= null;
        let descriptionVideo= null;
        if(typeEntite=="Offre"){
            titleVideo=nameCompany+" recrute un(e)"+nameOffre
            descriptionVideo=nameCompany+" recrute en vidéo un(e)"+nameOffre
        }else if(typeEntite=="Entreprise"){
            titleVideo="Découvrez l'entreprise "+nameCompany+" et ses offres d'emploi vidéo"
            descriptionVideo="Découvrez l'entreprise "+nameCompany+" et ses offres d'emploi vidéo. Envoyez votre candidature spontanée en vidéo"
        }else if(typeEntite=="Territoire"){
            titleVideo="Découvrez le territoire "+nameCompany
            descriptionVideo="Découvrez le territoire "+nameCompany
        }
        console.log(videoId);
        
        return (
            <RootContainer>
                <NextSeo
                title={titleVideo}
                description={descriptionVideo}
                noindex={true}
                nofollow={true}
                openGraph={{
                    title: titleVideo,
                    description: descriptionVideo,
                    url: "https://www.talentstube.com/Player?id="+id+"&url="+url+"&videoId="+videoId+"&typeEntite="+typeEntite+"&nameCompany="+nameCompany+"&nameOffre="+nameOffre,
                    type: 'video.movie',
                    video: {
                        // Multiple Open Graph actors is only available in version `7.0.2-canary.35`+ of next
                        releaseDate: this.state.date,
                        // Multiple Open Graph tags is only available in version `7.0.2-canary.35`+ of next 
                    },
                    site_name: 'Talents Tube',
                }}
                />
                <LayoutBackUrl text="Player" url={url} >   
                    <VideoVimeo classes={{ video: classes.video }} videoId={videoId} options="" autoplay='1' /> 
                </LayoutBackUrl>
            </RootContainer>
        )
    }
}

Player.getInitialProps = function (context) {

    let { id, url,videoId,typeEntite, nameCompany, nameOffre } = context.query;
    let {res} = context;
    return {id:id, url:url, videoId:videoId, typeEntite:typeEntite, nameCompany:nameCompany, nameOffre:nameOffre};
  }




export default withStyles(styles)(Player);