import './demo6.css';
import Button from '../../button';
import Checkbox from '../../checkbox';
import Field from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
const CheckboxGroup = Checkbox.Group;
const list = [
    {
        value: 'apple',
        label: 'apple',
    },
    {
        value: 'pear',
        label: 'pear',
    },
    {
        value: 'orange',
        label: 'orange',
    },
];
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checkboxStatus: true,
        };
        // @ts-ignore
        this.field = new Field(this, { scrollToFirstError: -10 });
    }
    isChecked(rule, value, callback) {
        if (!value) {
            return callback('consent agreement not checked ');
        }
        return callback();
    }
    userName(rule, value, callback) {
        if (value === 'frank') {
            setTimeout(() => callback('name existed'), 200);
        }
        else {
            setTimeout(() => callback(), 200);
        }
    }
    render() {
        const { init, validate, reset } = this.field;
        return (React.createElement("div", { className: "demo" },
            React.createElement(Input, Object.assign({}, init('input', {
                initValue: 'delete all',
                rules: { required: true },
            }))),
            this.field.getError('input') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('input').join(','))) : (''),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Input, Object.assign({ placeholder: "try onBlur" }, init('input1', {
                rules: [
                    {
                        required: true,
                        message: 'can not be empty',
                        trigger: ['onBlur', 'onChange'],
                    },
                ],
            }))),
            this.field.getError('input1') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('input1').join(','))) : (''),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Input, Object.assign({ defaultValue: "", placeholder: "try frank" }, init('username', {
                rules: [
                    {
                        validator: this.userName,
                        trigger: ['onBlur', 'onChange'],
                    },
                ],
            }))),
            this.field.getState('username') === 'validating'
                ? 'validating...'
                : '',
            this.field.getError('username') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('username').join(','))) : (''),
            React.createElement("br", null),
            React.createElement("br", null),
            "agreement:",
            React.createElement(Checkbox, Object.assign({}, init('checkbox', {
                valueName: 'checked',
                rules: [{ validator: this.isChecked }],
            }))),
            this.field.getError('checkbox') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('checkbox').join(','))) : (''),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Input.TextArea, Object.assign({ placeholder: ">3 and <10" }, init('textarea', {
                rules: [
                    {
                        required: true,
                        minLength: 3,
                        maxLength: 10,
                    },
                ],
            }))),
            this.field.getError('textarea') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('textarea').join(','))) : (''),
            React.createElement("br", null),
            React.createElement("br", null),
            this.state.checkboxStatus ? (React.createElement("div", null,
                "Array validate\uFF1A",
                React.createElement(CheckboxGroup, Object.assign({ dataSource: list }, init('checkboxgroup', {
                    rules: [
                        {
                            required: true,
                            type: 'array',
                            message: 'choose one please',
                        },
                    ],
                }), { style: { marginBottom: 10 } })),
                this.field.getError('checkboxgroup') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('checkboxgroup').join(','))) : (''))) : null,
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Button, { type: "primary", onClick: () => {
                    validate((errors, values) => {
                        console.log(errors, values);
                    });
                } }, "validate"),
            React.createElement(Button, { onClick: () => {
                    reset();
                } }, "reset"),
            React.createElement(Button, { onClick: () => {
                    if (this.state.checkboxStatus) {
                        this.setState({ checkboxStatus: false });
                        this.field.remove('checkboxgroup');
                    }
                    else {
                        this.setState({ checkboxStatus: true });
                    }
                } }, this.state.checkboxStatus ? 'delete' : 'restore')));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('field-demo-6'));
