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 class MediaVideo extends Component {
  state = {
    width: 0,
    ready: false,
  }
  constructor(props) {
    super(props)
    this.handleReady = this.handleReady.bind(this)
    this.handlePlay = this.handlePlay.bind(this)
  }
  handleReady(player) {
    player.getVideoWidth().then(width => {
      this.setState({ width })
    }).catch(error => {
    })
  }
  handlePlay() {
    this.setState({ ready: true })
  }
  render() {
    const { paragraph, media, currentParagraph, onAnnotationClick } = this.props
    const { ready } = this.state
    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 height = window.innerHeight - (17 * 16)
    let 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) {
      const colorName = annotation.settings.poster_background_color || annotation.settings.color || 'white'
      const color = CURTAIN_COLOR_LOOKUP[colorName]
      const elementStyle = {
        color: color.textColor,
        backgroundColor: color.backgroundColor,
      }
      style.color = color.textColor,
      style.backgroundColor = color.backgroundColor,
      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}
            onClick={e => onAnnotationClick(e, paragraph, annotation)}
          >
            <div className="speaker-icon">{SpeakerIcon}</div>
          </div>
          <MediaCitation media={item} />
        </div>
      )
    }

    // otherwise, inline the vimeo player
    const poster = annotation.settings.poster ? {
      backgroundImage: 'url(' + posterURL(item) + ')',
    } : {}
    style.opacity = ready ? 1.0 : 0.0
    return (
      <div className={className}>
        <div className='videoContainer' style={style}>
          <div className='videoPlayer'>
            <VimeoPlayer
              video={item.url}
              autoplay={annotation.settings.autoplay}
              muted={true}
              responsive={true}
              controls={false}
              byline={false}
              style={poster}
              onReady={this.handleReady}
              onPlay={this.handlePlay}
            />
          </div>
          {this.state.width && (
            <div
              className="speaker-icon"
              style={{
                right: '50%',
                marginRight: -1 * (this.state.width / 2 - 48 - 16)
              }}
              onClick={e => onAnnotationClick(e, paragraph, annotation)}
            >{SpeakerIcon}</div>
          )}
        </div>
        <MediaCitation media={item} />
      </div>
    )
  }
}