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

import './captions.css'

import { MEDIA_ANNOTATION_TYPES } from 'app/constants'
import CaptionForm from './components/caption.form'

class CaptionsContainer extends Component {
  render() {
    const { annotation, media, episode } = this.props
    const { order, lookup: annotationLookup } = annotation
    const { lookup: mediaLookup } = media

    const mediaItems = order.map(id => annotationLookup[id])
    .filter(annotation => (
      MEDIA_ANNOTATION_TYPES.has(annotation.type)
      && !annotation.settings.hideCitation
      && annotation.settings.media_id in mediaLookup
    ))
    .map(annotation => annotation.settings.media_id)
    .reduce((dedupe, media_id) => {
      if (dedupe.indexOf(media_id) === -1) {
        dedupe.push(media_id)
      }
      return dedupe
    }, [])
    .map(media_id => mediaLookup[media_id])

    // console.log(mediaItems)

    return (
      <div className='overview'>
        <div className='project-top'>
          <div className='project-heading'>
            <h2>Captions</h2>
          </div>
          {mediaItems.map((item, index) => (
            <CaptionForm
              key={item.id}
              episode={episode}
              media={item}
              index={index+1}
            />
          ))}
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  project: state.site.project,
  episode: state.site.episode,
  annotation: state.annotation.index,
  media: state.media.index,
})

export default connect(mapStateToProps)(CaptionsContainer)