import React, { Component } from 'react'
import VimeoPlayer from 'app/utils/vendor/vimeo'

import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
import { SpeakerIcon } from '../../nav/viewer.icons'
import { MediaCitation } from '../components.media'

export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationClick }) => {
  if (!media.lookup) return <div />
  // const { color } = element
  const className = currentParagraph ? 'media video current' : 'media video'
  const annotation = paragraph.annotations[0]
  const item = media.lookup[annotation.settings.media_id]
  if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
  const width = window.innerWidth
  const height = window.innerHeight - (17 * 16)
  const style = {
    color: color.textColor,
    height: height + 32,
    backgroundColor: color.backgroundColor,
  }
  const poster = annotation.settings.poster ? {
    backgroundImage: 'url(' + item.settings.video.thumbnail_url + ')',
    backgroundSize: '50%',
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
  } : {}
  // console.log(annotation.settings)
  return (
    <div
      className={className}
    >
      <div className='videoPlayer' style={style}>
        <VimeoPlayer
          video={item.url}
          autoplay={annotation.settings.autoplay}
          muted={true}
          responsive={true}
          controls={false}
          byline={false}
          style={poster}
        />
      </div>
      <MediaCitation media={item} />
    </div>
  )
}