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

import actions from 'app/actions'
import { timestampToSeconds } from 'app/utils'
import { VideoScrubber, VideoSubtitles } from '../player/components.media'

class ModalVideo extends Component {
  state = {
    // duration of the video, in seconds
    duration: 60.0,
    // percentage offset from vimeo. not used
    percent: 0.0,
    // current timestamp from vimeo, in seconds
    seconds: 0.0,
    // video start offset, in seconds
    video_start_ts: 0.0,
    // seek position, used to tell the player to seek
    seek: 0.0,
    // whether or not the scrubber is scrubbing
    scrubbing: false,
    // whether or not the video is ready and displaying an image
    ready: false,
    // trigger an audio fade-out
    fadeOut: false,
    // volume
    volume: 1.0,
    volumeFadeTime: 1000,
    lastCue: -1,
    // play state
    playing: false,
  }
  constructor(props) {
    super(props)
    this.handlePlay = this.handlePlay.bind(this)
    this.handlePause = this.handlePause.bind(this)
    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
    this.handleScrub = this.handleScrub.bind(this)
    this.handleToggle = this.handleToggle.bind(this)
    this.handleEnd = this.handleEnd.bind(this)
  }
  componentDidUpdate(prevProps) {
    if (prevProps.open && !this.props.open) {
      setTimeout(() => {
        actions.viewer.resetVideoModal()
      }, 500)
    }
  }
  handlePlay() {
    this.setState({ ready: true, playing: true })
  }
  handlePause() {
    this.setState({ playing: false })
  }
  handleEnd() {
    this.setState({ playing: false })
  }
  handleTimeUpdate(timing) {
    if (!this.state.scrubbing || ('scrubbing' in timing)) {
      this.setState(timing)
    }
  }
  handleScrub(timing) {
    // console.log(timing)
    this.setState({
      ...timing,
      seek: timing.seconds,
    })
  }
  handleToggle() {
    console.log('handle toggle to', !this.state.playing)
    this.setState({ playing: !this.state.playing })
  }
  render() {
    const { open, media: mediaItem, color, cc, playerVolume } = this.props
    const { duration, seconds, ready, volume, volumeFadeTime, playing, fadeOut, lastCue } = this.state
    if (!color || !mediaItem) {
      return <div />
    }
    const style = {
      backgroundColor: color.backgroundColor,
      color: color.textColor,
    }
    const playerStyle = {
      opacity: ready ? 1.0 : 0.0
    }
    // console.log(volume, playerVolume)
    return (
      <div
        className={open ? 'video-modal open' : 'video-modal'}
        style={style}
      >
        <div className='fullscreen-element video' onClick={this.handleToggle}>
          <div
            className='videoPlayer'
            style={playerStyle}
          >
            <VimeoPlayer
              video={mediaItem.url}
              paused={!open || (ready && !playing)}
              autoplay={true}
              autopause={false}
              muted={false}
              loop={false}
              seek={this.state.seek}
              responsive={true}
              controls={false}
              byline={false}
              volume={playerVolume}
              targetVolume={playerVolume}
              volumeFadeTime={volumeFadeTime}
              fadeOut={0}
              onPlay={this.handlePlay}
              onPause={this.handlePause}
              onTimeUpdate={this.handleTimeUpdate}
              onEnd={this.handleEnd}
              lastCue={lastCue}
            />
          </div>
          <VideoScrubber
            play_ts={seconds}
            start_ts={0}
            video_start_ts={0}
            playing={playing}
            duration={duration}
            timing={this.state}
            mediaItem={mediaItem}
            cc={cc}
            onScrub={this.handleScrub}
            onToggle={this.handleToggle}
            scrubMasterAudio={false}
          />
          <VideoSubtitles
            cc={cc}
            play_ts={seconds}
            mediaItem={mediaItem}
          />
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  ...state.viewer.videoModal,
  playerVolume: state.audio.volume,
  cc: state.audio.cc,
})

export default connect(mapStateToProps)(ModalVideo)