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

import actions from '../../../../actions'

import { ZOOM_STEPS } from '../../constants'
import { clamp } from '../../../../util'
import { positionToTime, timeToPosition } from '../../align.util'

import { AnnotationElementLookup } from './annotation.types'

class AnnotationIndex extends Component {
  state = {
    items: [],
  }
  constructor(props){
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  componentDidUpdate(prevProps) {
    if (this.props.index.loading) return
    if (prevProps.timeline !== this.props.timeline || prevProps.index !== this.props.index) {
      this.update()
    }
  }
  update() {
    let { timeline, index } = this.props
    let { start_ts, zoom, duration } = this.props.timeline
    const { order, lookup } = index

    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step
    let widthTimeDuration = window.innerHeight * secondsPerPixel // secs per pixel

    let timeMin = start_ts - 30.0
    let timeMax = Math.min(start_ts + widthTimeDuration, duration)

    const items = order.filter(id => {
      const { start_ts: ts } = lookup[id]
      return (timeMin < ts && ts < timeMax)
    }).map(id => lookup[id]).reverse()
    this.setState({ items })
  }
  handleClick(annotation) {
    actions.audio.seek(annotation.start_ts)
  }
  handleDoubleClick(annotation) {
    actions.align.showEditAnnotationForm(annotation)
  }
  render() {
    const { timeline } = this.props
    const { start_ts } = timeline
    const { items } = this.state
    return (
      <div className='annotationIndex'>
        {items.map(annotation => {
          const { id, type, start_ts } = annotation
          const AnnotationElement = AnnotationElementLookup[type]
          const y = timeToPosition(start_ts, timeline)
          return (
            <AnnotationElement
              key={id}
              y={y}
              annotation={annotation}
              onClick={this.handleClick}
              onDoubleClick={this.handleDoubleClick}
            />
          )
        })}
      </div>
    )
  }
}

const mapStateToProps = state => ({
  timeline: state.align.timeline,
  index: state.annotation.index,
})

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(AnnotationIndex)