import formConnect, {
  Checkbox,
  Radio,
  Select,
  Text,
  Textarea,
  Message,
} from 'react-validate-framework';

const schemas = {
  email: {
    rules: 'required | isEmail | maxLength(32) | validateFromServer',
    messages: 'Can not be empty! | Please enter a valid email address. | Can not exceed {{param}} characters. | | The email already exists.',
  },
  hobby: {
    rules: 'requiredField(phone) | selectLimit(2)',
    messages: 'email and hobby at least one entry! | Select at least {{param}}.',
  },
};

const methods = {
  selectLimit(field, param) {
    if (Array.isArray(field.value)) {
      return field.value.length >= param;
    }
    return false;
  },
  requiredField(field, param) {
    const otherField = this.fields[param];
    return this.required(field) || (otherField.result && this.required(otherField));
  },
  async validateFromServer(field, param) {
    return await doServerAPI();
  },
};

@formConnect(schemas, methods)
export default class BasicForm extends React.Component {
  
  static propTypes = {
    formControl: PropTypes.object,
  };

  constructor(props) {
    super(props);
    props.formControl.init({
      email: '',
      phone: '',
    }, {
      static: 'form-control',
      success: 'valid-success',
      error: 'valid-error',
    });
  }

  handleSubmit = async () => {
    const { formControl } = this.props;
    if (await formControl.validate()) {
      // Submit.
    }
  };

  render() {
    return (
      <div className="form-group">
        <Text
          name="email"
          placeholder="Please input your email"
          delay={100} // Asynchronous validation
        />
        <Message className="valid-error-message" name="email" />
        <Text name="phone" />
        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}

const {
  formControl: {
    fields,
    onFormChange,
  },
} = this.props;

return (
  <input
    className={fields.email.className}
    name="email"
    type="text"
    onChange={onFormChange}
    value={fields.email.value}
    placeholder="Please input your email"
  />
);