import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import actions from '../../../actions'
import { ParagraphElementLookup } from '../components/paragraph.types'

class ParagraphList extends Component {
  state = {
    paragraphs: [],
  }
  constructor(props) {
    super(props)
    this.onAnnotationClick = this.onAnnotationClick.bind(this)
    this.onParagraphDoubleClick = this.onParagraphDoubleClick.bind(this)
  }
  componentDidMount() {
    this.build()
  }
  build() {
    const { order: annotationOrder, lookup: annotationLookup } = this.props.annotation
    const { lookup: paragraphLookup } = this.props.paragraph
    let currentParagraph = {}
    const paragraphs = []
    annotationOrder.forEach((annotation_id, i) => {
      const annotation = annotationLookup[annotation_id]
      const paragraph = paragraphLookup[annotation.paragraph_id]
      if (annotation.paragraph_id !== currentParagraph.id) {
        const paragraph_type = getParagraphType(annotation, paragraph)
        currentParagraph = {
          id: annotation.paragraph_id || ('index_' + i),
          type: paragraph_type,
          annotations: [],
        }
        paragraphs.push(currentParagraph)
      }
      currentParagraph.annotations.push(annotation)
    })
    this.setState({ paragraphs })
  }
  onAnnotationClick(e, paragraph, annotation){
    //
  }
  onParagraphDoubleClick(e, paragraph) {
    //
  }
  render() {
    const { paragraphs } = this.state
    return (
      <div className='paragraphs'>
        <div className='content'>
          {paragraphs.map(paragraph => {
            if (paragraph.type in ParagraphElementLookup) {
              const ParagraphElement = ParagraphElementLookup[paragraph.type]
              return (
                <ParagraphElement
                  key={paragraph.id}
                  paragraph={paragraph}
                  selectedParagraph={false}
                  selectedAnnotation={-1}
                  onAnnotationClick={this.onAnnotationClick}
                  onDoubleClick={this.onParagraphDoubleClick}
                />
              )
            } else {
              return <div key={paragraph.id}>{'(empty)'}</div>
            }
          })}
        </div>
      </div>
    )
  }
}

const getParagraphType = (annotation, paragraph) => {
  if (!paragraph) {
    return annotation.type
  }
  return paragraph.type
}

const mapStateToProps = state => ({
  paragraph: state.paragraph.index,
  annotation: state.annotation.index,
  audio: state.audio,
})

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(ParagraphList)