import React, { Component } from 'react'
import { connect } from 'react-redux'
import { floatInRange } from 'app/utils'

import actions from 'app/actions'

import PlayerTranscript from './player.transcript'
import PlayerFullscreen from './player.fullscreen'

class PlayerContainer extends Component {
  componentDidMount() {
    // console.log(this.props.sections)
    actions.viewer.setCurrentSection(this.props.sections[0])
  }

  componentDidUpdate(prevProps) {
    if (this.props.audio.play_ts === prevProps.audio.play_ts) return
    this.setCurrentSection()
  }

  setCurrentSection() {
    const { audio, sections, currentSection } = this.props
    const { play_ts } = audio
    if (floatInRange(currentSection.start_ts, play_ts, currentSection.end_ts)) {
      return
    }

    const insideSection = sections.some(section => {
      if (floatInRange(section.start_ts, play_ts, section.end_ts)) {
        if (currentSection !== section) {
          actions.viewer.setCurrentSection(section)
        }
        return true
      }
      return false
    })
    if (!insideSection) {
      actions.viewer.setCurrentSection(sections[0])
    }
  }

  
  render() {
    // const { } = this.props
    const { currentSection, fullscreenTimeline } = this.props
    if (!currentSection) { return <div /> }
    // console.log(currentSection)
    return (
      <div className='viewer-container'>
        <PlayerTranscript section={currentSection} />
        <PlayerFullscreen timeline={fullscreenTimeline} />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  audio: state.audio,
  sections: state.viewer.sections,
  fullscreenTimeline: state.viewer.fullscreenTimeline,
  currentSection: state.viewer.currentSection,
})

export default connect(mapStateToProps)(PlayerContainer)