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

import actions from 'app/actions'
import { ROMAN_NUMERALS } from 'app/constants'
import { pad } from 'app/utils'
import { thumbnailURL } from 'app/utils/annotation.utils'
import { PlayIcon } from '../nav/viewer.icons'

class ChecklistContent extends Component {
  handleMediaSelection(section, mediaItem, i) {
    if (this.props.onlyEnableFirstSection) return
    // when clicking a work in the checklist,
    // if it's the first work in the section, seek to the beginning of the section
    // OTHERWISE seek to the work itself. might have to add this as another option on sections
    // since the first "work" in Animism pt 1 starts about a minute in...
    if (i === 0 && section.index !== 0) {
      actions.viewer.hideNavComponent('checklist')
      actions.viewer.seekToSection(section)
    } else {
      actions.viewer.seekToMediaItem(section, mediaItem)
    }
  }

  render() {
    const { sections, checklistSection } = this.props
    let mediaIndex = 1
    return (
      <div className="checklist-content">
        <div className="checklist-table">
          {sections.map(section => {
            if ((checklistSection !== "all" && section.index !== checklistSection) || !section.media.length) {
              return <div key={section.index} />
            }
            return (
              <div className="checklist-section" key={section.index}>
                {section.media.map((mediaItem, i) => (
                  <div
                    className="checklist-row"
                    key={section.index + "_" + i}
                    onClick={() => this.handleMediaSelection(section, mediaItem, i)}
                  >
                    <div className="media-id">
                      {pad(mediaIndex++, 2)}
                    </div>
                    <div className="media-section">
                      {ROMAN_NUMERALS[section.index]}
                      <br />
                      {section.title}
                    </div>
                    <div className="media-about">
                      {mediaItem.media.author}
                      <br />
                      {mediaItem.media.pre_title && (mediaItem.media.pre_title + ' ')}
                      <i>{mediaItem.media.title}</i>
                      {mediaItem.media.post_title && (' ' + mediaItem.media.post_title)}
                      <br />
                      {mediaItem.media.title.indexOf(String(mediaItem.media.date)) !== -1 && mediaItem.media.date}
                      <div className='media-type'>
                        {mediaItem.media.medium}
                        {mediaItem.media.settings.duration && (', ' + mediaItem.media.settings.duration)}
                      </div>
                    </div>
                    <div className="media-image">
                      <div className="media-thumbnail">
                        <img src={thumbnailURL(mediaItem.media)} alt={mediaItem.media.title} />
                        {mediaItem.type === 'video' &&
                          <span className='play-button'>
                            {PlayIcon}
                          </span>
                        }
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(ChecklistContent)