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(e, annotation) {
    e.stopPropagation()
    actions.audio.seek(annotation.start_ts)
    actions.align.setSelectedAnnotation(annotation.id)
  }
  handleDoubleClick(e, annotation) {
    e.stopPropagation()
    actions.align.showEditAnnotationForm(annotation)
  }
  render() {
    const { timeline, annotationInForm } = this.props
    const { start_ts, zoom, selected_annotation_id } = timeline
    const { items } = this.state
    const className = (zoom < 2)
      ? 'annotationIndex'
      : (zoom < 3)
      ? 'annotationIndex condensed'
      : 'annotationIndex collapsed'
    return (
      <div className={className}>
        {items.map(annotation => {
          if (annotationInForm && annotation.id === annotationInForm.id) {
            return null
          }
          const { id, type, start_ts } = annotation
          const AnnotationElement = AnnotationElementLookup[type]
          const y = timeToPosition(start_ts, timeline)
          return (
            <AnnotationElement
              key={id}
              y={y}
              selected={annotation.id === selected_annotation_id}
              annotation={annotation}
              onClick={this.handleClick}
              onDoubleClick={this.handleDoubleClick}
            />
          )
        })}
      </div>
    )
  }
}

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

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(AnnotationIndex)