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

import actions from '../../../../actions'
// import * as alignActions from '../align.actions'

import { ZOOM_STEPS } from '../../constants'
import { clamp, timestamp, capitalize } from '../../../../util'
import { timeToPosition } from '../../align.util'
import { Select } from '../../../../common'

const ANNOTATION_TYPES = [
  'sentence', 'header', 'paragraph_end', 'video',
].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))

class AnnotationForm extends Component {
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleDestroy = this.handleDestroy.bind(this)
    this.textareaRef = React.createRef()
  }
  componentDidMount() {
    if (this.textareaRef && this.textareaRef.current) {
      this.textareaRef.current.focus()
    }
  }
  handleKeyDown(e) {
    if (e.keyCode === 27) { // escape
      actions.align.hideAnnotationForm()
      return      
    }
    // console.log(e.keyCode)
    if (!e.metaKey && !e.ctrlKey) return
    let { start_ts } = this.props.annotation
    switch (e.keyCode) {
      case 38: // up
        e.preventDefault()
        start_ts -= 0.1
        actions.align.updateAnnotationForm('start_ts', Math.max(0, start_ts))
        actions.audio.seek(start_ts)
        actions.align.setCursor(start_ts)
        break
      case 40: // down
        e.preventDefault()
        start_ts += 0.1
        actions.align.updateAnnotationForm('start_ts', Math.max(0, start_ts))
        actions.audio.seek(start_ts)
        actions.align.setCursor(start_ts)
        break
      case 83: // ctrl-S
        e.preventDefault()
        this.handleSubmit()
      default:
        break
    }
  }
  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }
  handleSelect(name, value) {
    actions.align.updateAnnotationForm(name, value)
  }
  handleSettingsSelect(name, value) {
    if (name.indexOf('_id') !== -1) value = parseInt(value) || 0
    actions.align.updateAnnotationSettings(name, value)
  }
  handleSubmit() {
    const { annotation } = this.props
    if (annotation.type === 'paragraph_end') {
      annotation.text = ''
    }
    if (annotation.id === 'new') {
      delete annotation.id
      actions.annotation.create(annotation)
        .then(response => {
          console.log(response)
          actions.align.hideAnnotationForm()
        })
    } else {
      actions.annotation.update(annotation)
        .then(response => {
          console.log(response)
          actions.align.hideAnnotationForm()
        })
    }
  }
  handleDestroy() {
    const { annotation } = this.props
    if (annotation.id === 'new') {
      actions.align.hideAnnotationForm()
    } else {
      actions.annotation.destroy(annotation)
        .then(response => {
          console.log(response)
          actions.align.hideAnnotationForm()
        })
    }
  }
  render() {
    const { timeline, annotation } = this.props
    if (!annotation.start_ts) return <div></div>
    return (
      <div
        className='annotationForm'
        style={{
          top: timeToPosition(annotation.start_ts, timeline),
        }}
      >
        {this.renderButtons()}
        {annotation.type === 'sentence' && this.renderTextarea()}
        {annotation.type === 'header' && this.renderTextarea()}
        {annotation.type === 'video' && this.renderVideo()}
      </div>
    )
  }
  renderButtons() {
    const { annotation } = this.props
    return (
      <div className='row buttons'>
        <div>
          <Select
            name='type'
            selected={annotation.type}
            options={ANNOTATION_TYPES}
            defaultOption='text'
            onChange={this.handleSelect}
          />
          <div className='ts'>{timestamp(annotation.start_ts, 1, true)}</div>
        </div>
        <div>
          {annotation.id !== 'new' && <button onClick={this.handleDestroy}>Delete</button>}
          <button onClick={this.handleSubmit}>Save</button>
        </div>
      </div>
    )
  }
  renderTextarea() {
    const { annotation } = this.props
    return (
      <div>
        <textarea
          name='text'
          value={annotation.text}
          onKeyDown={this.handleKeyDown}
          onChange={this.handleChange}
          ref={this.textareaRef}
        />
      </div>
    )
  }
  renderVideo() {
    const { annotation, media } = this.props
    if (!media.lookup) return <div />
    const { lookup, order } = media
    const video_list_items = order.filter(id => lookup[id].type === 'video').map(id => {
      const video = lookup[id]
      return {
        name: video.id,
        label: video.author + ' - ' + video.title
      }
    })
    return (
      <div>
        <Select
          name='media_id'
          className="media_id"
          selected={annotation.settings.media_id}
          options={video_list_items}
          defaultOption='Choose a video'
          onChange={this.handleSettingsSelect}
        />
      </div>
    )
  }
}

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

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm)