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

import actions from 'app/actions'
import ViewerSectionsNav from './viewer.sections.nav'
import { ROMAN_NUMERALS, CURTAIN_COLOR_LOOKUP } from 'app/constants'
import { clamp, timestamp, floatInRange, floatLT } from 'app/utils'
import { thumbnailURL, sectionProgressPercentage } from 'app/utils/annotation.utils'
import { SpeakerIcon } from '../nav/viewer.icons'

class ViewerSections 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 className="viewer-sections">
        <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>
        <ViewerSectionsNav />
      </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)(ViewerSections)