import React, { Component } from 'react'

import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'

export default class GalleryImageForm extends Component {
  state = {
    loaded: false,
    data: {},
  }
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleSubmitAndEditNext = this.handleSubmitAndEditNext.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
  }
  componentDidMount() {
    this.setState({
      loaded: true,
      data: { ...this.props.initialData },
    })
  }
  componentDidUpdate(prevProps) {
    if (this.props.id !== prevProps.id) {
      this.setState({
        data: { ...this.props.initialData },
      })
    }
  }
  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }
  handleSelect(name, value) {
    this.setState({
      data: {
        ...this.state.data,
        [name]: value,
      }
    })
  }
  handleSubmit(e) {
    e.preventDefault()
    e.stopPropagation()
    this.props.onSave(this.props.id, this.state.data)
  }
  handleSubmitAndEditNext(e) {
    e.preventDefault()
    e.stopPropagation()
    this.props.onSave(this.props.id, this.state.data, true)
  }
  handleCancel(e) {
    e.preventDefault()
    e.stopPropagation()
    this.props.onSave(null)
  }
  render() {
    const { thumbnail } = this.props
    const { loaded, data } = this.state
    if (!loaded) return <div />
    return (
      <div className='modal visible'>
        <div className='row'>
          <div>
            <img src={thumbnail.url} />
          </div>
          <div>
            <TextInput
              title="Author"
              name="author"
              data={data}
              onChange={this.handleChange}
              autoComplete="off"
            />
            <TextInput
              title="Title"
              name="title"
              data={data}
              onChange={this.handleChange}
              autoComplete="off"
            />
            <TextInput
              title="Date"
              name="date"
              data={data}
              onChange={this.handleChange}
              autoComplete="off"
            />
            <TextInput
              title="Medium"
              name="medium"
              data={data}
              onChange={this.handleChange}
              autoComplete="off"
            />
            <Checkbox
              label="Include in checklist"
              name="in_checklist"
              checked={data.in_checklist}
              onChange={this.handleSelect}
            />
            <TextArea
              title="Short caption"
              name="caption"
              placeholder="Used on inline galleries"
              data={data}
              onChange={this.handleChange}
            />
            <TextArea
              title="Long caption"
              name="long_caption"
              placeholder="Used on detail views of the item, suitable for longer texts"
              data={data}
              onChange={this.handleChange}
            />
            <div className='label'>
              <span></span>
              <div className='buttons'>
                <button onClick={this.handleSubmit}>Save and close</button>
                <button onClick={this.handleSubmitAndEditNext}>Save and edit next</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}