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

import { PlayButton, PlayerTime, VolumeControl } from 'app/views/viewer/nav/viewer.icons'

class FullscreenVideo extends Component {
  state = {
    duration: 0.0,
    percent: 0.0,
    seconds: 0.0,
    seek: 0.0,
  }
  constructor(props) {
    super(props)
    this.handlePlay = this.handlePlay.bind(this)
    this.handlePause = this.handlePause.bind(this)
    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
    this.handleEnd = this.handleEnd.bind(this)
  }
  componentDidUpdate(prevProps) {
    if (Math.abs(this.props.play_ts - prevProps.play_ts) > 2.0) {
      // handle seek
      const seek = this.props.play_ts - this.props.element.start_ts
      this.setState({ seek })
    }
  }
  handlePlay() {

  }
  handlePause() {

  }
  handleEnd() {

  }
  handleTimeUpdate(timing) {
    this.setState(timing)
  }
  render() {
    const { element, media, transitionDuration, playing, volume } = this.props
    const { duration, percent, seconds } = this.state
    const { color } = element
    const item = media.lookup[element.settings.media_id]
    const style = {
      backgroundColor: color.backgroundColor,
      color: color.textColor,
      transitionDuration,
    }
    // console.log(item)
    return (
      <div
        className='fullscreen-element video'
        style={style}
      >
        <div className='vimeoPlayer'>
          <VimeoPlayer
            video={item.url}
            paused={!playing}
            autoplay={true}
            muted={true}
            seek={this.state.seek}
            responsive={true}
            controls={false}
            byline={false}
            onPlay={this.handlePlay}
            onPause={this.handlePause}
            onTimeUpdate={this.handleTimeUpdate}
            onEnd={this.handleEnd}
          />
        </div>
        <div className='video-nav'>
          <div className='video-title'>
            {item.title}
          </div>
          <div className='video-playback'>
            <PlayButton playing={playing} />
            <PlayerTime play_ts={seconds} duration={duration} />
            <VolumeControl volume={volume} />
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  viewer: state.viewer,
  play_ts: state.audio.play_ts,
  playing: state.audio.playing,
  volume: state.audio.volume,
})

export default connect(mapStateToProps)(FullscreenVideo)