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 } from 'app/constants'
import { thumbnailURL } from 'app/utils/annotation.utils'

class ViewerSections extends Component {
  componentDidMount() {
  }
  
  handleSectionSelection(section) {
    actions.audio.seek(section.start_ts)
    actions.viewer.hideSection('nav')
  }

  render() {
    const { sections } = this.props
    return (
      <div className="viewer-sections">
        {sections.map(section => {
          // console.log(section)
          return (
            <div
              className="viewer-section"
              key={section.index}
              onClick={() => this.handleSectionSelection(section)}
            >
              <div>
                <div className="section-thumbnail" style={{
                  backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')',
                }}/>
                <div className="section-title">
                  {ROMAN_NUMERALS[section.index]}<br />
                  {section.title}
                </div>
                <div className="section-media">
                  {section.mediaLabels}
                </div>
              </div>
            </div>
          )
        })}
        <ViewerSectionsNav />
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(ViewerSections)