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

import actions from 'app/actions'

import PlayerTranscript from './player.transcript'

class PlayerContainer extends Component {
  state = {
    currentSection: null,
  }

  componentDidMount() {
    // console.log(this.props.sections)
    this.setState({ currentSection: this.props.sections[0] })
  }

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

  setCurrentSection() {
    const { currentSection } = this.state
    const { audio, sections } = 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) {
          this.setState({ currentSection: section })
        }
        return true
      }
      return false
    })
    if (!insideSection) {
      this.setState({ currentSection: sections[0] })
    }
  }

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

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

export default connect(mapStateToProps)(PlayerContainer)