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

import { TextArea, Button } from 'app/common'
import GalleryCaptionForm from './galleryCaption.form'
import actions from 'app/actions'

const ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")

export default class CaptionForm extends Component {
  state = {
    editing: false,
    expanded: false,
    media: { settings: {} },
  }

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

  componentDidMount() {
    this.setState({
      media: {
        ...this.props.media,
        settings: {
          ...this.props.media.settings,
        }
      }
    })
  }

  edit() {
    this.setState({ editing: true })
  }
  expand() {
    this.setState({ expanded: !this.state.expanded })
  }

  handleChange(e){
    e.preventDefault()
    this.setState({
      media: {
        ...this.state.media,
        settings: {
          ...this.state.media,
          bibliography: e.target.value,
        }
      }
    })
  }

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

  handleUpdateGalleryCaption(caption_id, item) {
    const media = {
      ...this.state.media,
      settings: {
        ...this.state.media.settings,
        caption_lookup: {
          ...this.state.media.settings.caption_lookup,
          [caption_id]: { ...item }
        }
      }
    }
    // console.log(media)
    actions.media.update(media)
    this.setState({ media })
  }

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

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

  renderForm() {
    const { episode, index } = this.props
    const { media } = this.state
    return (
      <form className='caption-form' onSubmit={this.handleSubmit}>
        <TextArea
          title={`Edit caption ${media.id}`}
          name="bibliography"
          placeholder={(
            media.settings.bibliography
            ? "Enter caption"
            : "This caption was automatically generated and is not set."
          )}
          data={media.settings}
          onChange={this.handleChange}
        />
        <div className='buttons'>
          <span>
            <Link to={`/editor/${episode.id}/media/${media.id}/edit/`}>Edit media</Link>
          </span>
          <div>
            <button onClick={this.handleSubmit}>Save caption</button>
            <button onClick={this.handleCancel}>Cancel</button>
          </div>
        </div>
      </form>
    )
  }

  renderEntry() {
    const { index } = this.props
    const { media } = this.state
    const { bibliography } = media.settings
    return (
      <div>
        <div className={media.settings.bibliography ? 'caption-entry' : 'caption-entry generated'} onClick={this.edit}>
          <div className='caption-index'>
            {index}{'. '}
          </div>
          {media.settings.bibliography
            ? <div className='caption-text' dangerouslySetInnerHTML={{ __html: media.settings.bibliography }} />
            : this.renderAutomaticCaption()
          }
        </div>
        {media.type === 'gallery' && this.renderGalleryEntries()}
      </div>
    )
  }

  renderAutomaticCaption() {
    const { media } = this.state
    return (
      <div className='caption-text'>
        {media.author}
        {', '}
        {media.pre_title && media.pre_title}
        {media.title}
        {media.post_title && media.post_title}
        {'. '}
        {media.date && (
          ' ' + media.date + '.'
        )}
        {media.medium && (
          ' ' + media.medium + '.'
        )}
        {media.source && (
          ' ' + media.source.trim()
        )}
        {' (Automatic)'}
      </div>
    )
  }

  renderGalleryEntries() {
    const { index } = this.props
    const { media, expanded } = this.state
    const { image_order, caption_lookup } = media.settings
    return (
      <div className={expanded ? "gallery-captions expanded" : "gallery-captions"}>
        <div className="row">
          <div className='button-spacer'></div>
          <button className="expander" onClick={this.expand}>{expanded ? "▼ Hide gallery entries" : "► Show gallery entries"}</button>
        </div>
        {expanded && image_order.map((caption_id, caption_index) => (
          <GalleryCaptionForm
            key={caption_index}
            caption_id={caption_id}
            item={caption_lookup[caption_id]}
            index={index + ALPHABET[caption_index]}
            onUpdate={this.handleUpdateGalleryCaption}
          />
        ))}
      </div>
    )
  }
}