import React from 'react'
import { observer } from 'xmobx/mobx-react'
import JsonLd from '../../src/components/features/JsonLd'
import { ObserverInput, ObserverForm, FormState } from '../../src/forms'

// @todo - radiogroup
class FormStateEh extends FormState {
  inputsList = [
    {
      name: 'checkboxOnEh',
      type: 'checkbox',
      value: 'on',
      isChecked: true,
      isSelected: true,
    },
    {
      name: 'checkboxOffEh',
      type: 'checkbox',
      value: 'off',
      isChecked: true,
      isSelected: true,
    },
    {
      name: 'radioOnEh',
      type: 'radio',
      value: '',
      isChecked: true,
      isSelected: true,
    },
    {
      name: 'radioOffEh',
      type: 'radio',
      value: '',
    },
    {
      name: 'emailEh',
      type: 'email',
      value: 'james@eh',
    },
    {
      name: 'passwordEh',
      type: 'password',
      value: '123',
      isValid: false,
    },
    {
      // slider
      name: 'sliderEh',
      type: 'range',
    },
    {
      name: 'numberEh',
      type: 'number',
      value: 10,
    },
    {
      name: 'telEh',
      type: 'tel',
      value: '1250-555-5555',
    },
    {
      name: 'colorEh',
      type: 'color',
      value: 'blue',
    },
    {
      name: 'foshofosho',
      type: 'text',
      value: 'you are our 1,000,000 visitor!',
    },
    {
      name: 'textarena',
      type: 'textarea',
      value: 'textareayo',
    },
    {
      name: 'withTextBox',
      value: 'canada',
      className: 'no-class-needed',
      animatePlaceholder: true,
      placeholderText: 'test',
    },
  ]
}

const formStateEh = new FormStateEh()

class WrapElementEh extends React.PureComponent {
  render() {
    return <div {...this.props} data-wrap-eh={true} />
  }
}
class InputElementEh extends React.PureComponent {
  render() {
    return <input {...this.props} data-input-eh={true} />
  }
}
class SubmitButtonEh extends React.PureComponent {
  render() {
    return <button {...this.props} data-input-eh={true} />
  }
}
class InputEh extends ObserverInput {
  Wrap = WrapElementEh
  Input = InputElementEh
}

@observer
class FormEh extends ObserverForm {
  static FormState = FormStateEh
  Input = InputEh
  SubmitButton = SubmitButtonEh

  static defaultProps = {
    state: formStateEh,
    shouldSerialize: false,
  }

  handleSubmit = event => {
    event.preventDefault()
  }
  componentDidUpdate() {
    if (this.hasUpdated === true) {
      return
    }
    this.hasUpdated = true
  }
  render() {
    if (this.props.shouldSerialize === true && this.hasRendered === false) {
      const serialized = this.state.toSerialized()
      const jsonview = <JsonLd>{serialized}</JsonLd>
      return jsonview
      // react can use strings now yay
      // return serialized
    }

    return super.render()
  }
}

export { FormEh }
export default FormEh