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

import { session } from 'app/session'
import actions from 'app/actions'
import { history } from 'app/store'

import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common'
import AudioSelect from 'app/views/audio/components/audio.select'

const newPage = (data) => ({
  path: '',
  title: '',
  username: session('username'),
  description: '',
  settings: {
    x: 0.05,
    y: 0.05,
    background_color: '#000000',
    background_audio_id: 0,
    restart_audio: false,
  },
  ...data,
})

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

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

  componentDidMount() {
    const { graph, data, isNew } = this.props
    const title = isNew ? 'new page' : 'editing ' + data.title
    const submitTitle = isNew ? "Create Page" : "Save Changes"
    this.setState({
      title,
      submitTitle,
      errorFields: new Set([]),
      data: { 
        ...newPage({ graph_id: graph.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,
      }
    })
  }

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

  handleSettingsSelect(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 = "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 page
        // session.set('username', data.username)
      } else {
        validData.id = data.id
      }
      console.log('submit', validData)
      onSubmit(validData)
    }
  }

  handleDelete(e) {
    e && e.preventDefault()
    e && e.stopPropagation()
    const { data } = this.state
    console.log(data)
    if (confirm('Really delete this page?')) {
      actions.page.destroy(data)
      .then(() => {
        this.props.actions.graph.hideEditPageForm()
        history.goBack()
      })
    }
  }

  render() {
    const { graph, isNew } = this.props
    const { title, submitTitle, errorFields, data } = this.state
    return (
      <div className='box'>
        <h1>{title}</h1>
        <form onSubmit={this.handleSubmit}>
          <TextInput
            title="Path"
            name="path"
            required
            data={data}
            error={errorFields.has('path')}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <LabelDescription>
            {'Page URL: /' + graph.path + '/'}<b>{data.path}</b>
          </LabelDescription>
          <TextInput
            title="Title"
            name="title"
            required
            data={data}
            error={errorFields.has('title')}
            onChange={this.handleChange}
            autoComplete="off"
          />
          <ColorInput
            title='BG Color'
            name='background_color'
            data={data.settings}
            onChange={this.handleSettingsChange}
            autoComplete="off"
          />
          <TextArea
            title="Description"
            name="description"
            data={data}
            onChange={this.handleChange}
          />

          <AudioSelect
            title="Background Audio"
            name="background_audio_id"
            selected={data.settings.background_audio_id}
            onChange={this.handleSettingsSelect}
          />

          <Checkbox
            label="Stop all sounds"
            name="stop_all_sounds"
            checked={data.settings.stop_all_sounds}
            onChange={this.handleSettingsSelect}
          />

          <Checkbox
            label="Restart audio on load"
            name="restart_audio"
            checked={data.settings.restart_audio}
            onChange={this.handleSettingsSelect}
          />

          <div className='row buttons'>
            <SubmitButton
              title={submitTitle}
              onClick={this.handleSubmit}
            />
            {!isNew && 
              <SubmitButton
                title={'Delete'}
                className='destroy'
                onClick={this.handleDelete}
              />
            }
          </div>
          {!!errorFields.size &&
            <label>
              <span></span>
              <span>Please complete the required fields =)</span>
            </label>
          }
        </form>
      </div>
    )
  }
}