import React, { Component } from 'react'
import VimeoPlayer from '@u-wave/react-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, currentAnnotation, 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 = {
    backgroundColor: color.backgroundColor,
    color: color.textColor,
    height: height + 32
  }
  // console.log(annotation.settings)
  return (
    <div
      className={className}
    >
      <div className='videoPlayer' style={style}>
        <VimeoPlayer
          video={item.url}
          autoplay={annotation.settings.autoplay}
          muted
          controls={false}
          byline={false}
          width={width}
          height={height}
        />
      </div>
      <MediaCitation media={item} />
    </div>
  )
}