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'

class PlayerContainer extends Component {
  state = {
    currentSection: -1,
  }

  componentDidMount() {
    this.setCurrentSection()
  }

  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
    return (
      <div className='viewer-container'>
        <div className="player">
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(PlayerContainer)

/*
- section name, number
- next link
- player
*/