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

import actions from 'app/actions'

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

import { annotationFormLookup } from './annotationForms'

const ANNOTATION_TYPES = [
  'sentence', 'section_heading', 'heading_text', 'paragraph_end',
  'video',
  'image', 'image_carousel',
  'curtain', 'intro',
].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.handleSettingsChange = this.handleSettingsChange.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)
  }
  handleSettingsChange(e) {
    const { name, value } = e.target
    this.handleSettingsSelect(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
    return (
      <div
        className='annotationForm'
        style={{
          top: timeToPosition(annotation.start_ts, timeline),
        }}
      >
        {this.renderButtons()}
        {annotation.type === 'sentence' && this.renderTextarea()}
        {annotation.type === 'section_heading' && this.renderTextarea()}
        {annotation.type === 'text_heading' && this.renderTextarea()}
        {(annotation.type in annotationFormLookup) && this.renderElementForm()}
      </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>
    )
  }
  renderElementForm() {
    const { annotation, media } = this.props
    const AnnotationFormElement = annotationFormLookup[annotation.type]
    return (
      <AnnotationFormElement
        annotation={annotation}
        media={media}
        handleSettingsChange={this.handleSettingsChange}
        handleSettingsSelect={this.handleSettingsSelect}
      />
    )
  }
}

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

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm)