import React, { Component, Fragment,lazy, Suspense } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography'
import LayoutBackUrl from '../components/templates/LayoutBackUrl';
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';
const renderLoader = () => <p>Chargement</p>;
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: 'Dosis',
        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 */
        },
    }
})


class Player extends Component {
    render() {
        const { classes } = this.props
        const params = queryString.parse(location.search);
        console.log(params.id);
        console.log(params.type);
        console.log(params.videoId);
        let url = params.id;
        return (
            <LayoutBackUrl text="Player" url={url} >
                
                    
                        <VideoVimeo classes={{ video: classes.video }} videoId={params.videoId} options="" autoplay='1' />
                
            </LayoutBackUrl>
        )
    }
}

Player.getInitialProps = function (context) {

    let { id, videoId,type } = context.query;
    let {res} = context;
    return {};
  }




export default withStyles(styles)(Player);