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/views/align/align.util'
import { PlayIcon } from '../nav/viewer.icons'

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

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

export default connect(mapStateToProps)(ChecklistContent)