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

import { session } from '../../../session'
import { capitalize } from '../../../util'

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

import MediaImageForm from './media.formImage'
import MediaVideoForm from './media.formVideo'

const newMedia = () => ({
  type: 'image',
  tag: 'media',
  url: '',
  title: '',
  author: '',
  pre_title: '',
  translated_title: '',
  date: '',
  source: '',
  medium: '',
  start_ts: 0,
  settings: {},
})

const MEDIA_TYPES = [
  'image', 'video'
].map(name => ({ name, label: capitalize(name) }))

export default class MediaForm extends Component {
  state = {
    title: "",
    submitTitle: "",
    data: { ...newMedia() },
    errorFields: new Set([]),
  }

  constructor(props) {
    super(props)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSettingsChange = this.handleSettingsChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  componentDidMount() {
    const { data, isNew } = this.props
    const title = isNew ? 'New media' : 'Editing ' + data.title
    const submitTitle = isNew ? "Add Media" : "Save Changes"
    this.setState({
      title,
      submitTitle,
      errorFields: new Set([]),
      data: { 
        ...newMedia(),
        ...data
      },
    })
  }

  handleChange(e) {
    const { name, value } = e.target
    this.handleSelect(name, value)
  }

  handleSelect(name, value) {
    const { errorFields } = this.state
    if (errorFields.has(name)) {
      errorFields.delete(name)
    }
    this.setState({
      errorFields,
      data: {
        ...this.state.data,
        [name]: value,
      }
    })
  }

  handleSettingsChange(name, value) {
    this.setState({
      data: {
        ...this.state.data,
        settings: {
          ...this.state.data.settings,
          [name]: [value],
        }
      }
    })
  }

  handleSubmit(e) {
    e.preventDefault()
    const { isNew, onSubmit } = this.props
    const { data } = this.state
    const requiredKeys = "title".split(" ")
    const validKeys = "title".split(" ")
    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
    const errorFields = requiredKeys.filter(key => !validData[key])
    if (errorFields.length) {
      console.log('error', errorFields, validData)
      this.setState({ errorFields: new Set(errorFields) })
    } else {
      if (isNew) {
        // side effect: set username if we're creating a new media
        // session.set('username', data.username)
      } else {
        validData.id = data.id
      }
      console.log('submit', validData)
      onSubmit(validData)
    }
  }

  render() {
    const { isNew } = this.props
    const { title, submitTitle, errorFields, data } = this.state
    /*
      type: '',
      tag: '',
      url: '',
    */
    console.log(data)
    return (
      <div className='form'>
        <h1>{title}</h1>
        <form onSubmit={this.handleSubmit}>
          <Select
            title='Media Type'
            name='type'
            selected={data.type}
            options={MEDIA_TYPES}
            onChange={this.handleSelect}
          />

          {data.type === 'image' &&
            <MediaImageForm
              data={data}
              onChange={this.handleSelect}
              onSettingsChange={this.handleSettingsChange}
            />
          }

          {data.type === 'video' &&
            <MediaVideoForm
              data={data}
              onChange={this.handleSelect}
              onSettingsChange={this.handleSettingsChange}
            />
          }

          <TextInput
            title="Author"
            name="author"
            required
            data={data}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <TextInput
            title="Title"
            name="title"
            required
            data={data}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <TextInput
            title="Title Prefix"
            name="pre_title"
            required
            data={data}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <TextInput
            title="Translated Title"
            name="translated_title"
            required
            data={data}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <TextInput
            title="Date"
            name="date"
            required
            data={data}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <TextInput
            title="Medium"
            name="medium"
            required
            data={data}
            onChange={this.handleChange}
          />
          <TextInput
            title="Source"
            name="source"
            placeholder="Courtesy of / Copyright"
            required
            data={data}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <TextArea
            title="Description"
            name="description"
            data={data}
            onChange={this.handleChange}
          />
          <SubmitButton
            title={submitTitle}
            onClick={this.handleSubmit}
          />
          {!!errorFields.size &&
            <label>
              <span></span>
              <span>Please complete the required fields =)</span>
            </label>
          }
        </form>
      </div>
    )
  }
}