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'
import { posterURL } from 'app/utils/annotation.utils'

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,
  }

  // if this is a fullscreen video, display the poster image
  if (annotation.settings.fullscreen && !annotation.settings.inline) {
    style.backgroundImage = 'url(' + posterURL(item) + ')'
    if (annotation.settings.poster_size) {
      style.backgroundSize = annotation.settings.poster_size
    }
    return (
      <div className={className}>
        <div className='videoPoster' style={style}>
          <div className="speaker-icon">{SpeakerIcon}</div>
        </div>
        <MediaCitation media={item} />
      </div>
    )
  }

  const poster = annotation.settings.poster ? {
    backgroundImage: 'url(' + posterURL(item) + ')',
  } : {}
  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>
  )
}