import Button from '../../button';
import Field from '../../field';
import Form from '..';
import Input from '../../input';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};
class BasicDemo extends React.Component {
    constructor(props) {
        super(props);
        this.field = new Field(this);
        this.validate = () => {
            this.field.validate(['sex']);
        };
    }
    userExists(rule, value) {
        return new Promise((resolve, reject) => {
            if (!value) {
                resolve(undefined);
            }
            else {
                setTimeout(() => {
                    if (value === 'frank') {
                        reject(new Error('Sorry, this username is already occupied.'));
                    }
                    else {
                        resolve(undefined);
                    }
                }, 500);
            }
        });
    }
    checkPass(rule, value, callback) {
        const { validate } = this.field;
        if (value) {
            validate(['rePasswd']);
        }
        callback();
    }
    checkPass2(rule, value, callback) {
        const { getValue } = this.field;
        if (value && value !== getValue('passwd')) {
            return callback('Inconsistent password input twice!');
        }
        return callback();
    }
    render() {
        const { getState, getValue, getError } = this.field;
        return (React.createElement(Form, Object.assign({}, formItemLayout, { field: this.field }),
            React.createElement(FormItem, { label: "Username:", hasFeedback: true, required: true, validator: this.userExists.bind(this), help: 
                // @ts-ignore
                getState('username') === 'loading'
                    ? 'Checking ...'
                    : getError('username') },
                React.createElement(Input, { placeholder: "Input frank", name: "username" }),
                React.createElement("p", null,
                    "Hello ",
                    getValue('username'))),
            React.createElement(FormItem, { label: "Password:", hasFeedback: true, required: true, requiredMessage: "Please enter password", validator: this.checkPass.bind(this) },
                React.createElement(Input, { htmlType: "password", name: "passwd" })),
            React.createElement(FormItem, { label: "Check your password:", hasFeedback: true, required: true, requiredMessage: "Enter your password again", validator: this.checkPass2.bind(this) },
                React.createElement(Input, { htmlType: "password", placeholder: "Enter the same password twice", name: "rePasswd" })),
            React.createElement(FormItem, { label: "Gender:", hasFeedback: true, required: true, requiredMessage: "Please select your gender" },
                React.createElement(RadioGroup, { name: "sex" },
                    React.createElement(Radio, { value: "male" }, "Male"),
                    React.createElement(Radio, { value: "female" }, "Female"))),
            React.createElement(FormItem, { wrapperCol: { offset: 6 } },
                React.createElement(Button, { onClick: this.validate }, "Validate by Field"),
                React.createElement(Form.Submit, { validate: true, type: "primary", onClick: (v, e) => console.log(v, e), style: { margin: '0 10px' } }, "Submit"),
                React.createElement(Form.Reset, null, "Reset"))));
    }
}
ReactDOM.render(React.createElement(BasicDemo, null), document.getElementById('form-demo-12'));
