/* eslint no-console:0 */

import { DatePicker } from 'ant-design-vue'
import createDOMForm from '../src/createDOMForm'
import { regionStyle, errorStyle } from './styles'

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

    reset (e) {
      e.preventDefault()
      this
        .form
        .resetFields()
    },

    checkStart (rule, value, callback) {
      const { validateFields } = this.form
      validateFields(['end'], { force: true })
      callback()
    },

    checkEnd (rule, value, callback) {
      const end = value
      const { getFieldValue } = this.form
      const start = getFieldValue('start')
      if (!end || !start) {
        callback('please select both start and end time')
      } else if (end.valueOf() < start.valueOf()) {
        callback('start time should be less than end time')
      } else {
        callback()
      }
    },
  },

  render () {
    const { form } = this
    const { getFieldProps, getFieldError } = form
    return (
      <div style={{
        margin: 20,
      }}>
        <h2>startTime and endTime validation</h2>
        <form onSubmit={this.onSubmit}>
          <div style={regionStyle}>
            <div>start:
            </div>
            <div>
              <DatePicker {...getFieldProps('start', { rules: [this.checkStart] })}/>
            </div>
          </div>

          <div style={regionStyle}>
            <div>end:
            </div>
            <div>
              <DatePicker {...getFieldProps('end', { rules: [this.checkEnd] })}/>
            </div>
          </div>

          <div style={errorStyle}>
            {getFieldError('end')
              ? getFieldError('end').join(',')
              : ''}
          </div>

          <div style={regionStyle}>
            <button onClick={this.reset}>reset</button>
            &nbsp;
            <input type='submit' value='submit'/>
          </div>
        </form>
      </div>
    )
  },
}

export default createDOMForm()(Form)