import Balloon from '../../balloon';
import Button from '../../button';
import Checkbox from '../../checkbox';
import DatePicker from '../../date-picker';
import Field from '../../field';
import Form from '..';
import Grid from '../../grid';
import Input from '../../input';
import NumberPicker from '../../number-picker';
import Radio from '../../radio';
import Range from '../../range';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '../../select';
import Switch from '../../switch';
import TimePicker from '../../time-picker';
import Upload from '../../upload';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
const { Row, Col } = Grid;
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.field = new Field(this);
    }
    handleSubmit(value) {
        console.log('Form values：', value);
    }
    render() {
        const init = this.field.init;
        return (React.createElement(Form, Object.assign({}, formItemLayout, { field: this.field }),
            React.createElement(FormItem, { label: "I'm the title\uFF1A" },
                React.createElement("p", { className: "next-form-text-align" }, "The quick brown fox jumps over the lazy dog."),
                React.createElement("p", null,
                    React.createElement("a", { href: "#" }, "Link"))),
            React.createElement(FormItem, { label: "Password:" },
                React.createElement(Balloon, { trigger: React.createElement(Input, Object.assign({ htmlType: "password" }, init('pass'))), align: "r", closable: false, triggerType: "hover" }, "input password")),
            React.createElement(FormItem, { label: "NumberPicker:" },
                React.createElement(NumberPicker, { min: 1, max: 10, name: "numberPicker", defaultValue: 3 }),
                React.createElement("span", null, "Something in here")),
            React.createElement(FormItem, { label: "Switch:", required: true },
                React.createElement(Switch, { name: "switch", defaultChecked: true })),
            React.createElement(FormItem, { label: "Range:", required: true },
                React.createElement(Range, { defaultValue: 30, 
                    // @ts-ignore
                    scales: [0, 100], marks: [0, 100], name: "range" })),
            React.createElement(FormItem, { label: "Select:", required: true },
                React.createElement(Select, { style: { width: 200 }, name: "select" },
                    React.createElement(Option, { value: "jack" }, "jack"),
                    React.createElement(Option, { value: "lucy" }, "lucy"),
                    React.createElement(Option, { value: "disabled", disabled: true }, "disabled"),
                    React.createElement(Option, { value: "hugohua" }, "hugohua"))),
            React.createElement(FormItem, { label: "DatePicker:", labelCol: { span: 6 }, required: true },
                React.createElement(Row, null,
                    React.createElement(FormItem, { style: { marginRight: 10, marginBottom: 0 } },
                        React.createElement(DatePicker, { name: "startDate" })),
                    React.createElement(FormItem, { style: { marginBottom: 0 } },
                        React.createElement(DatePicker, { name: "endDate" })))),
            React.createElement(FormItem, { label: "RangePicker:", labelCol: { span: 6 }, required: true },
                React.createElement(RangePicker, { name: "rangeDate" })),
            React.createElement(FormItem, { label: "TimePicker:", required: true },
                React.createElement(TimePicker, { name: "time" })),
            React.createElement(FormItem, { label: "Checkbox:" },
                React.createElement(Checkbox.Group, { name: "checkbox" },
                    React.createElement(Checkbox, { value: "a" }, "option 1 "),
                    React.createElement(Checkbox, { value: "b" }, "option 2 "),
                    React.createElement(Checkbox, { disabled: true, value: "c" }, "option 3\uFF08disabled\uFF09"))),
            React.createElement(FormItem, { label: "Radio:" },
                React.createElement(Radio.Group, { name: "radio" },
                    React.createElement(Radio, { value: "apple" }, "apple"),
                    React.createElement(Radio, { value: "banana" }, "banana"),
                    React.createElement(Radio, { disabled: true, value: "cherry" }, "cherry\uFF08disabled\uFF09"))),
            React.createElement(FormItem, { label: "Logo\uFF1A" },
                React.createElement(Upload, { action: "/upload.do", listType: "text", name: "upload" },
                    React.createElement(Button, { type: "primary", style: { margin: '0 0 10px' } }, "Upload"))),
            React.createElement(Row, { style: { marginTop: 24 } },
                React.createElement(Col, { offset: "6" },
                    React.createElement(Form.Submit, { type: "primary", onClick: this.handleSubmit.bind(this) }, "Submit")))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('form-demo-13'));
