/* eslint react/no-multi-comp:0, no-console:0 */

import { createForm } from '../index'

const Form = {
  props: {
    form: Object,
  },

  beforeMount () {
    this.nameDecorator = this.form.getFieldDecorator('name', {
      initialValue: '',
      rules: [{
        required: true,
        message: 'What\'s your name?',
      }],
    })
  },
  methods: {
    onSubmit (e) {
      e.preventDefault()
      this.form.validateFields((error, values) => {
        if (!error) {
          console.log('ok', values)
        } else {
          console.log('error', error, values)
        }
      })
    },

    onChange (e) {
      console.log(e.target.value)
    },
  },

  render () {
    const { getFieldError } = this.form

    return (
      <form onSubmit={this.onSubmit}>
        {this.nameDecorator(
          <input
            onInput={this.onChange}
          />
        )}
        <div style={{ color: 'red' }}>
          {(getFieldError('name') || []).join(', ')}
        </div>
        <button>Submit</button>
      </form>
    )
  },
}

export default createForm()(Form)