import React, { Fragment } from 'react'
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import _ from "lodash"
import Ar from "lodash/array"

const useStyles = makeStyles(theme => ({
    video: {
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        paddingBottom: '56%', /* 16:9  58%*/
        '& iframe': {
            position: 'absolute',
            top: 0,
            left: 'calc(50% - 50vw)',
            width: '100vw',
            height: '100%',
        },
        [theme.breakpoints.up('md')]: {
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
            paddingBottom: '36%', /* 16:9 */
            '& iframe': {
                position: 'absolute',
                top: 0,
                left: 'calc(50% - 32vw)',
                width: '64vw',
                height: '100%',
            },
        },
    },
    videoPresentation: {
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        paddingBottom: '56%', /* 16:9  58%*/
        '& iframe': {
            position: 'absolute',
            top: 0,
            left: 'calc(50% - 50vw)',
            width: '100vw',
            height: '100%',
        },
        [theme.breakpoints.up('md')]: {
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
            paddingBottom: '56.5%', /* 16:9 */
            '& iframe': {
                position: 'absolute',
                top: 0,
                left: 'calc(50% - 32vw)',
                width: '64vw',
                height: '100%',
            },
        },
    }
}));

export default function VideoVimeo(props) {

    const {videoId, title, options, classesOverride, autoplay} = props;
    const classes = useStyles();
    let className = classes.video;
    if (classesOverride) {
        className = classes.videoPresentation;
    }
  
    return (
        
        <section className={className +' '+classesOverride}>
            <iframe className='player' 
            src={"https://player.vimeo.com/video/"+ videoId + options+"?texttrack=fr&autoplay="+autoplay} 
            frameBorder="0" 
            title={title} 
            webkitallowfullscreen="true" mozallowfullscreen="true" allowFullScreen></iframe>
            
        </section>
    )
}


VideoVimeo.defaultProps = {
    options: "",
};