import './demo4.css';
import Button from '../../button';
import Field from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  field: Field;
  validate: () => void;
  constructor(props) {
    super(props);

    this.field = new Field(this);

    this.validate = () => {
      console.log(this.field.getErrors());
      this.field.validate(error => {
        alert(JSON.stringify(error)); // eslint-disable-line
      });
    };
  }

  // eslint-disable-next-line no-alert
  render() {
    const { init, getError, setError, setErrors } = this.field;
    return (
      <div className="demo">
        <Input
          {...init('input', {
            rules: [
              {
                required: true,
                pattern: /hello/,
                message: 'must be hello',
              },
            ],
          })}
        />
        <br />
        <span style={{ color: 'red' }}>{getError('input')}</span>

        <br />
        <Button
          onClick={() => {
            setError('input', 'set error 1');
          }}
        >
          setError
        </Button>

        <Button
          onClick={() => {
            setErrors({ input: 'set error 2' });
          }}
        >
          setErrors
        </Button>

        <Button
          onClick={() => {
            setErrors({ input: '' });
          }}
        >
          clear
        </Button>

        <br />
        <br />
        <Input {...init('input2')} />
        <br />
        <span style={{ color: 'red' }}>{getError('input2')}</span>
        <br />

        <Button
          onClick={() => {
            setError(
              'input2',
              'errors will be removed by onChange and shown on validate',
            );
          }}
        >
          setError
        </Button>

        <Button onClick={this.validate}>validate</Button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('field-demo-4'));