import React, { Component } from 'react'

import { TextArea, Button } from 'app/common'
import actions from 'app/actions'

export default class FootnoteForm extends Component {
  state = {
    editing: false,
    footnote: {},
  }

  constructor(props) {
    super(props)
    this.edit = this.edit.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
  }

  componentDidMount() {
    this.setState({ footnote: { ...this.props.footnote } })
  }

  edit() {
    this.setState({ editing: true })
  }

  handleChange(e){
    e.preventDefault()
    this.setState({
      footnote: {
        ...this.state.footnote,
        text: e.target.value,
      }
    })
  }

  handleSubmit(e) {
    e.preventDefault()
    actions.annotation.update(this.state.footnote)
    this.setState({ editing: false })
  }

  handleCancel(e) {
    e.preventDefault()
    this.setState({
      editing: false,
      footnote: { ...this.props.footnote }
    })
  }

  render() {
    return this.state.editing
      ? this.renderForm()
      : this.renderEntry()
  }

  renderForm() {
    const { index } = this.props
    const { footnote } = this.state
    return (
      <form className='footnote-form' onSubmit={this.handleSubmit}>
        <TextArea
          title={`Edit footnote ${index}`}
          name="text"
          placeholder="Enter footnote"
          data={footnote}
          onChange={this.handleChange}
        />
        <div className='buttons'>
          <span></span>
          <div>
            <button onClick={this.handleSubmit}>Save footnote</button>
            <button onClick={this.handleCancel}>Cancel</button>
          </div>
        </div>
      </form>
    )
  }

  renderEntry() {
    const { index } = this.props
    const { footnote } = this.state
    return (
      <div className='footnote-entry' onClick={this.edit}>
        <div className='footnote-index'>
          {index}{'. '}
        </div>
        <div className='footnote-text' dangerouslySetInnerHTML={{ __html: footnote.text }} />
      </div>
    )
  }
}