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 } from '../../../../util'
import { timeToPosition } from '../../align.util'
import { Select } from '../../../../common'

const ANNOTATION_TYPES = [
  'sentence', 'header'
].map(name => ({ name, label: name }))

class AnnotationForm extends Component {
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.handleSubmit = this.handleSubmit.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', 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', 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)
  }
  handleSubmit() {
    const { annotation } = this.props
    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()
        })
    }
  }
  render() {
    const { timeline, annotation } = this.props
    if (!annotation.start_ts) return <div></div>
    return (
      <div
        className='annotationForm'
        style={{
          top: timeToPosition(annotation.start_ts, timeline),
        }}
      >
        {annotation.type === 'sentence' && this.renderTextarea()}
        {annotation.type === 'header' && this.renderTextarea()}
        <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>
          <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>
    )
  }
}

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

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm)