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

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

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

const newTile = (data) => ({
  path: '',
  title: '',
  username: session('username'),
  description: '',
  settings: {
    x: 0.05, y: 0.05,
  },
  ...data,
})

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

  componentDidMount() {
    const { graph, page, data, isNew } = this.props
    const title = isNew ? 'new tile' : 'editing ' + data.title
    const submitTitle = isNew ? "Create Tile" : "Save Changes"
    this.setState({
      title,
      submitTitle,
      errorFields: new Set([]),
      data: { 
        ...newTile({ graph_id: graph.id, page_id: page.id }),
        ...data,
      },
    })
  }

  handleChange(e) {
    const { errorFields } = this.state
    const { name, value } = e.target
    if (errorFields.has(name)) {
      errorFields.delete(name)
    }
    let sanitizedValue = value
    if (name === 'path') {
      sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-')
    }
    this.setState({
      errorFields,
      data: {
        ...this.state.data,
        [name]: sanitizedValue,
      }
    })
  }

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

  handleSubmit(e) {
    e.preventDefault()
    const { isNew, onSubmit } = this.props
    const { data } = this.state
    const requiredKeys = "path title".split(" ")
    const validKeys = "graph_id path title username description settings".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 tile
        // session.set('username', data.username)
      } else {
        validData.id = data.id
      }
      console.log('submit', validData)
      onSubmit(validData)
    }
  }

  render() {
    const { graph, isNew } = this.props
    const { title, submitTitle, errorFields, data } = this.state
    return (
      <div className='box'>
        <h1>{title}</h1>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <TextInput
            title="Path"
            name="path"
            required
            data={data}
            error={errorFields.has('path')}
            onChange={this.handleChange.bind(this)}
            autoComplete="off"
          />
          <TextInput
            title="Title"
            name="title"
            required
            data={data}
            error={errorFields.has('title')}
            onChange={this.handleChange.bind(this)}
            autoComplete="off"
          />
          <TextArea
            title="Description"
            name="description"
            data={data}
            onChange={this.handleChange.bind(this)}
          />
          <SubmitButton
            title={submitTitle}
            onClick={this.handleSubmit.bind(this)}
          />
          {!!errorFields.size &&
            <label>
              <span></span>
              <span>Please complete the required fields =)</span>
            </label>
          }
        </form>
      </div>
    )
  }
}