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

import './footnotes.css'

import FootnoteForm from './components/footnote.form'

class FootnotesContainer extends Component {
  render() {
    const { annotation } = this.props
    const { order, lookup } = annotation
    const footnote_ids = order.filter(id => lookup[id].type === 'footnote')

    return (
      <div className='overview'>
        <div className='project-top'>
          <div className='project-heading'>
            <h2>Footnotes</h2>
          </div>
          {footnote_ids.map((footnote_id, index) => (
            <FootnoteForm
              key={footnote_id}
              footnote={lookup[footnote_id]}
              index={index + 1}
            />
          ))}
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(FootnotesContainer)