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

import { createForm } from '../index'
import { regionStyle, errorStyle } from './styles'

const Email = {
  props: {
    form: Object,
  },
  render () {
    const { getFieldProps, getFieldError, isFieldValidating } = this.form
    const errors = getFieldError('email')
    return (<div style={ regionStyle }>
      <div>email validate onBlur && onChange</div>
      <div>
        <input {...getFieldProps('email', {
          validate: [{
            trigger: 'blur',
            rules: [{
              required: true,
            }],
          }, {
            trigger: ['blur', 'input'],
            rules: [{
              type: 'email',
              message: '错误的 email 格式',
            }],
          }],
        })}
        />
      </div>
      <div style={errorStyle}>
        {errors ? errors.join(',') : null}
      </div>
      <div style={errorStyle}>
        {isFieldValidating('email') ? 'validating' : null}
      </div>
    </div>)
  },

}

const User = {
  props: {
    form: Object,
  },
  render () {
    const { getFieldProps, getFieldError, isFieldValidating } = this.form
    const errors = getFieldError('user')
    return (<div style={ regionStyle }>
      <div>user validate on submit</div>
      <div>
        <input {...getFieldProps('user', {
          rules: [
            {
              required: true,
            },
            {
              type: 'string',
              min: 5,
            },
          ],
          validateTrigger: null,
        })}
        />
      </div>
      <div style={errorStyle}>
        {(errors) ? errors.join(',') : null}
      </div>
      <div style={errorStyle}>
        {isFieldValidating('user') ? 'validating' : null}
      </div>
    </div>)
  },
}

const Form = {
  props: {
    form: Object,
  },
  methods: {
    onSubmit  (e) {
      e.preventDefault()
      this.form.validateFields((error, values) => {
        if (!error) {
          console.log('ok', values)
        } else {
          console.log('error', error, values)
        }
      })
    },
  },

  render () {
    const { form } = this
    return (<div style={{ margin: '20px' }}>
      <h2>use validateTrigger config</h2>
      <form onSubmit={this.onSubmit}>
        <User form={ form }/>

        <Email form={ form }/>

        <div style={ regionStyle }>
          <button>submit</button>
        </div>
      </form>
    </div>)
  },
}

export default createForm()(Form)