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

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

const SECTION_WIDTH = 13 * 16

class ViewerSectionsList extends Component {
  state = {
    selectedSectionIndex: -1,
  }
  constructor(props) {
    super(props)
    this.scrollRef = React.createRef()
    this.handleWheel = this.handleWheel.bind(this)
  }
  shouldComponentUpdate(nextProps) {
    if (this.props.currentSection !== nextProps.currentSection) {
      this.scrollToSection(nextProps.currentSection)
    }
    if (nextProps.nav !== this.props.nav) return true
    return nextProps.nav
  }
  scrollToSection(section) {
    const dx = section.index * SECTION_WIDTH
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.scrollRef.current.scrollTo(dx, 0)
    }, 500)
  }
  handleWheel(e) {
    let delta = Math.abs(e.deltaY) > Math.abs(e.deltaX) ? e.deltaY : e.deltaX
    this.scrollRef.current.scrollLeft += delta
  }
  handleSectionClick(e, section) {
    if (this.props.onlyEnableFirstSection && section.index !== 0) {
      this.setState({ selectedSectionIndex: section.index })
      clearTimeout(this.warningFadeTimeout)
      this.warningFadeTimeout = setTimeout(() => {
        this.setState({ selectedSectionIndex: -1 })
      }, 10000)
    } else {
      actions.viewer.seekToSection(section)
    }
  }
  render() {
    const { play_ts, sections, media, currentSection, onlyEnableFirstSection } = this.props
    const { selectedSectionIndex } = this.state
    return (
      <div
        ref={this.scrollRef}
        className="viewer-sections-scroll"
        onWheel={e => this.handleWheel(e)}
      >
        {sections.map(section => {
          // console.log(section)
          let mediaItem
          if (section.cover_id) {
            mediaItem = media.lookup[section.cover_id]
          } else {
            mediaItem = 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={e => this.handleSectionClick(e, section)}
            >
              <div className="section-content">
                <div className="section-thumbnail" style={{
                  backgroundImage: mediaItem && 'url(' + thumbnailURL(mediaItem) + ')',
                }}>
                  {!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>
              {!!(onlyEnableFirstSection && section.index) && (
                <div className={section.index === selectedSectionIndex ? 'section-limited visible' : 'section-limited'}>
                  {SECTION_LIMITED_MESSAGE}
                </div>
              )}
            </div>
          )
        })}
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(ViewerSectionsList)