import React, { Component } from 'react'
import { Link } from 'react-router-dom'

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

export default class GalleryCaptionForm extends Component {
  state = {
    editing: false,
    item: {},
  }

  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({
      item: {
        ...this.props.item,
      }
    })
  }

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

  handleChange(e){
    e.preventDefault()
    this.setState({
      item: {
        ...this.state.item,
        caption: e.target.value,
      }
    })
  }

  handleSubmit(e) {
    e.preventDefault()
    this.props.onUpdate(this.props.caption_id, this.state.item)
    this.setState({ editing: false })
  }

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

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

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

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

  renderAutomaticCaption() {
    const { item } = this.state
    return (
      <div className='caption-text'>
        {item.author ? item.author + '. ' : ''}
        {item.title ? item.title + '. ' : ''}
        {item.date}
        {' (Generated)'}
      </div>
    )
  }
}