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

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

class AnnotationForm extends Component {
  state = {
    data: {},
  }
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
  }
  componentDidMount(){
    this.setState({
      data: { ...this.props.annotation },
    })
  }
  componentDidUpdate(prevProps){
    if (this.props.annotation !== prevProps.annotation) {
      this.setState({
        data: {
          ...this.props.annotation,
          text: this.state.data.text,
          type: this.state.data.text,
        },
      })
    }
  }
  handleKeyDown(e) {
    switch (e.keyCode) {
    }
  }
  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }
  handleSelect(name, value) {
    this.setState({
      data: {
        ...this.state.data,
        [name]: value,
      }
    })
  }
  handleSubmit() {
    const { data } = this.state
    if (data.id === 'new') {
      delete data.id
      actions.graph.create(data)
        .then(response => {
          console.log(response)
          actions.align.hideTimestampForm()
        })
    } else {
      actions.graph.update(data)
        .then(response => {
          console.log(response)
          actions.align.hideTimestampForm()
        })
    }
  }
  render() {
    const { timeline } = this.props
    const { data } = this.state
    if (!data.start_ts) return <div></div>
    return (
      <div
        className='annotationForm'
        style={{
          top: timeToPosition(data.start_ts, timeline),
        }}
      >
        {data.type === 'sentence' && this.renderTextarea()}
        {data.type === 'header' && this.renderTextarea()}
        <div className='row'>
          <Select
            name='type'
            selected={data.type}
            options={TIMESTAMP_TYPES}
            defaultOption='text'
            onChange={this.handleSelect}
          />
          <button>Save</button>
        </div>
      </div>
    )
  }
  renderTextarea() {
    const { data } = this.state
    return (
      <div>
        <textarea
          value={data.text}
          onKeyDown={this.handleKeyDown}
          onChange={this.handleChange}
        />
      </div>
    )
  }
}


/*
- get the first sentence from the text
- display the form at that point
*/

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

const mapDispatchToProps = dispatch => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(AnnotationForm)