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

import { floatLT, floatInRange, capitalize } from 'app/utils'
import ParagraphForm from '../components/paragraph.form'

class ParagraphList extends Component {
  state = {
    currentParagraph: -1,
    currentAnnotation: -1,
  }
  
  componentDidUpdate(prevProps) {
    if (this.props.audio.play_ts === prevProps.audio.play_ts) return
    this.setCurrentParagraph()
  }

  setCurrentParagraph() {
    const { play_ts } = this.props.audio
    const insideParagraph = this.props.paragraphs.some(paragraph => {
      if (floatInRange(paragraph.start_ts, play_ts, paragraph.end_ts)) {
        this.setCurrentAnnotation(paragraph, play_ts)
        return true
      }
      return false
    })
    if (!insideParagraph) {
      this.setState({
        currentParagraph: -1,
        currentAnnotation: -1,
      })
    }
  }

  setCurrentAnnotation(paragraph, play_ts) {
    const { id: currentParagraph, annotations } = paragraph
    const possibleAnnotations = annotations.filter(a => a.type !== 'footnote')
    let currentAnnotation
    let annotation
    let i = 0, next_i
    let len = possibleAnnotations.length
    for (let i = 0; i < len - 1; i++) {
      next_i = i + 1
      if (next_i < len && floatLT(play_ts, possibleAnnotations[next_i].start_ts)) {
        currentAnnotation = possibleAnnotations[i].id
        break
      }
    }
    if (!currentAnnotation) {
      currentAnnotation = possibleAnnotations[len-1].id
    }
    this.setState({ currentParagraph, currentAnnotation })
  }

  render() {
    const {
      paragraphs, media,
      paragraphElementLookup, selectedParagraph,
      onAnnotationClick, onParagraphDoubleClick,
    } = this.props
    const { currentParagraph, currentAnnotation } = this.state
    return paragraphs.map((paragraph, i) => {
      if (selectedParagraph && selectedParagraph.id === paragraph.id) {
        paragraph = selectedParagraph
      }
      if (paragraph.type in paragraphElementLookup) {
        const ParagraphElement = paragraphElementLookup[paragraph.type]
        return (
          <ParagraphElement
            key={paragraph.id + "_" + i}
            paragraph={paragraph}
            media={media}
            currentParagraph={paragraph.id === currentParagraph}
            currentAnnotation={paragraph.id === currentParagraph && currentAnnotation}
            onAnnotationClick={onAnnotationClick}
            onDoubleClick={onParagraphDoubleClick}
          />
        )
      // } else {
      //   return <div key={paragraph.id}>{'(' + capitalize(paragraph.type) + ')'}</div>
      }
    })
  }
}

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

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(ParagraphList)