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

import { createForm } from '../index';
import { Select } from 'ant-design-vue';
import { regionStyle, errorStyle } from './styles';
import { mergeProps } from '../../_util/props-util';
const emailTpl = ['@gmail.com', '@outlook.com', '@qq.com'];
const { Option } = Select;
const CustomInput = {
  props: {
    form: Object,
  },
  data() {
    return { data: [] };
  },
  methods: {
    onChange(v) {
      if (v.indexOf('@') === -1) {
        this.data = emailTpl.map(m => v + m);
      } else if (this.data.length) {
        this.data = [];
      }
    },
  },

  render() {
    const { getFieldProps, getFieldError, isFieldValidating } = this.form;
    const errors = getFieldError('select');
    return (
      <div style={regionStyle}>
        <div>custom select sync validate</div>
        <div>
          <Select
            {...mergeProps(
              {
                props: { placeholder: 'please select', mode: 'combobox', filterOption: false },
                style: { width: '200px' },
              },
              getFieldProps('select', {
                change: this.onChange,
                rules: [{ type: 'email' }, { required: true }],
              }),
            )}
          >
            {this.data.map(d => {
              return (
                <Option key={d} value={d}>
                  {d}
                </Option>
              );
            })}
          </Select>
        </div>
        <div style={errorStyle}>
          {errors ? (
            errors.join(',')
          ) : (
            <b
              style={{
                visibility: 'hidden',
              }}
            >
              1
            </b>
          )}
        </div>
        <div style={errorStyle}>
          {isFieldValidating('select') ? (
            'validating'
          ) : (
            <b
              style={{
                visibility: 'hidden',
              }}
            >
              1
            </b>
          )}
        </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>suggest</h2>
        <form onSubmit={this.onSubmit}>
          <CustomInput form={form} />

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

export default createForm()(Form);