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

import { capitalize } from 'app/utils'

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

const newProject = () => ({
  title: '',
  is_live: false,
  settings: {
    description: "",
    base_href: "",
    ftp_url: "",
    ftp_base_path: "",
  },
})

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

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

  componentDidMount() {
    const { data, isNew } = this.props
    const title = isNew ? 'New project' : 'Editing ' + data.title
    const submitTitle = isNew ? "Add Project" : "Save Changes"
    this.setState({
      title,
      submitTitle,
      errorFields: new Set([]),
      data: { 
        ...newProject(),
        ...data
      },
    })
    window.addEventListener('keydown', this.handleKeyDown)
  }

  componentWillUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown)
  }

  handleKeyDown(e) {
    // console.log(e, e.keyCode)
    if ((e.ctrlKey || e.metaKey) && e.keyCode === 83) {
      if (e) {
        e.preventDefault()
      }
      this.handleSubmit()
    }
  }

  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,
      }
    })
  }

  handleSettingsChangeEvent(e) {
    const { name, value } = e.target
    this.handleSettingsChange(name, value)
  }

  handleSettingsChange(name, value) {
    // console.log(name, value)
    if (name !== 'multiple') {
      value = { [name]: value }
    }
    this.setState({
      data: {
        ...this.state.data,
        settings: {
          ...this.state.data.settings,
          ...value,
        }
      }
    })
  }

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

  render() {
    const { isNew } = this.props
    const { title, submitTitle, errorFields, data } = this.state
    // console.log(data)
    return (
      <div className='form project-form'>
        <h1>{title}</h1>
        <form onSubmit={this.handleSubmit}>
          <SubmitButton
            title={submitTitle}
            onClick={this.handleSubmit}
          />
          <TextInput
            title="Title"
            name="title"
            required
            data={data}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <Checkbox
            label="Project is live"
            name="is_live"
            checked={data.is_live}
            onChange={this.handleSelect}
          />

          <TextArea
            title="Description"
            name="description"
            required
            data={data.settings}
            onChange={this.handleSettingsChangeEvent}
            autoComplete="off"
          />

          <h3>Deployment settings</h3>

          <TextInput
            title="Base URL"
            name="base_href"
            data={data.settings}
            onChange={this.handleSettingsChangeEvent}
            autoComplete="off"
          />
          <TextInput
            title="FTP URL"
            name="ftp_url"
            data={data.settings}
            onChange={this.handleSettingsChangeEvent}
            autoComplete="off"
          />

          <TextInput
            title="FTP Base Path"
            name="ftp_base_path"
            data={data.settings}
            onChange={this.handleSettingsChangeEvent}
            autoComplete="off"
          />

          <SubmitButton
            title={submitTitle}
            onClick={this.handleSubmit}
          />
          {!!errorFields.size &&
            <label>
              <span></span>
              <span>Please complete the required fields</span>
            </label>
          }
        </form>
      </div>
    )
  }
}
/*
        open ftp://animism:Agkp8#48@93.114.86.205;
        lcd ./data_store/exports/animism;
*/