import React, { Component } from 'react'
import { connect } from 'react-redux'

import actions from 'app/actions'
import { ROMAN_NUMERALS } from 'app/constants'
import { timestamp } from 'app/utils'
import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils'
import { SpeakerIcon } from '../nav/viewer.icons'

class ViewerSectionsList extends Component {
  constructor(props) {
    super(props)
    this.scrollRef = React.createRef()
    this.handleWheel = this.handleWheel.bind(this)
  }
  shouldComponentUpdate(nextProps) {
    if (nextProps.nav !== this.props.nav) return true
    return nextProps.nav
  }
  handleWheel(e) {
    let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX
    this.scrollRef.current.scrollLeft += delta
  }
  render() {
    const { play_ts, sections, currentSection } = this.props
    return (
      <div
        ref={this.scrollRef}
        className="viewer-sections-scroll"
        onWheel={e => this.handleWheel(e)}
      >
        {sections.map(section => {
          // console.log(section)
          const media = section.media.length ? section.media[0].media : null
          const { no_audio, section_nav_color } = section
          const progress = sectionProgressPercentage(section, play_ts)
          return (
            <div
              className={(!currentSection || section.index === currentSection.index) ? "viewer-section current-section" : "viewer-section"}
              key={section.index}
              onClick={() => actions.viewer.seekToSection(section)}
            >
              <div>
                <div className="section-thumbnail" style={{
                  backgroundImage: media && 'url(' + thumbnailURL(media) + ')',
                }}>
                  {!no_audio &&
                    <div className={"section-duration-" + section_nav_color}>
                      <div className="section-duration">
                        {timestamp(section.duration)}
                      </div>
                      <div className="section-has-audio">
                        {SpeakerIcon}
                      </div>
                      <div className="section-progress-bar">
                        <div className="section-progress"
                          style={{ width: progress }}
                        />
                      </div>
                    </div>
                  }
                </div>
                <div className="section-title">
                  {ROMAN_NUMERALS[section.index]}<br />
                  {section.title}
                </div>
                <div className="section-media">
                  {section.mediaLabels}
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(ViewerSectionsList)