import Checkbox from '../../checkbox';
import Form from '..';
import Icon from '../../icon';
import Input from '../../input';
import NumberPicker from '../../number-picker';
import Radio from '../../radio';
import Range from '../../range';
import Rating from '../../rating';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '../../select';
import Switch from '../../switch';
import Upload from '../../upload';
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
        span: 7,
    },
    wrapperCol: {
        span: 16,
    },
};
const fileList = [
    {
        uid: '0',
        name: 'IMG.png',
        state: 'done',
        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
    },
    {
        uid: '1',
        name: 'IMG.png',
        percent: 50,
        state: 'uploading',
        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
    },
    {
        uid: '2',
        name: 'IMG.png',
        state: 'error',
        url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
        imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
    },
];
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            preview: false,
        };
        this.submitHandler = e => {
            console.log(e);
        };
        this.onPreviewChange = checked => {
            this.setState({
                preview: checked,
            });
        };
        this.ratingPreview = value => {
            return (React.createElement("p", null,
                value,
                " ",
                value > 2.5 ? React.createElement(Icon, { type: "smile" }) : React.createElement(Icon, { type: "cry" })));
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement(Form, Object.assign({}, formItemLayout, { isPreview: this.state.preview, style: { maxWidth: '800px' } }),
                React.createElement(FormItem, { label: "preview: ", isPreview: false, size: "small", style: { marginBottom: 0 } },
                    React.createElement(Switch, { size: "medium", onChange: this.onPreviewChange })),
                React.createElement("div", { style: { height: 1, width: '100%', margin: '20px 0' } }),
                React.createElement(FormItem, { required: true, label: "Username:" },
                    React.createElement(Input, { defaultValue: "Fusion", placeholder: "Please enter your username", id: "username", name: "username", "aria-required": "true" })),
                React.createElement(FormItem, { required: true, label: "Password:" },
                    React.createElement(Input, { defaultValue: "Fusion@2019", htmlType: "password", placeholder: "Please enter your password", id: "password", name: "password", "aria-required": "true" })),
                React.createElement(FormItem, { required: true, label: "Link:" },
                    React.createElement(Input, { name: "link", addonTextBefore: "http://", addonTextAfter: ".com", defaultValue: "alibaba", "aria-label": "input with config of addonTextBefore and addonTextAfter" })),
                React.createElement(FormItem, { required: true, label: "Number:" },
                    React.createElement(NumberPicker, { name: "number", defaultValue: 1 })),
                React.createElement(FormItem, { required: true, label: "autoComplete:" },
                    React.createElement(Select.AutoComplete, { name: "autoComplete", defaultValue: "selected" })),
                React.createElement(FormItem, { required: true, label: "multiple Select:" },
                    React.createElement(Select, { name: "select", defaultValue: ['apple', 'banana'], mode: "multiple" },
                        React.createElement(Select.Option, { value: "apple" }, "Apple"),
                        React.createElement(Select.Option, { value: "banana" }, "Banana"))),
                React.createElement(FormItem, { required: true, label: "Rating:" },
                    React.createElement(Rating, { defaultValue: 4.5, 
                        // @ts-ignore
                        name: "rate", "aria-label": "what's the rate score" })),
                React.createElement(FormItem, { required: true, label: "Custom Render Rating:", renderPreview: this.ratingPreview },
                    React.createElement(Rating, { defaultValue: 4.5, 
                        // @ts-ignore
                        name: "rate2", "aria-label": "what's the rate2 score" })),
                React.createElement(FormItem, { required: true, label: "Checkbox:" },
                    React.createElement(Checkbox.Group, { name: "checkbox", defaultValue: ['react', 'vue'] },
                        React.createElement(Checkbox, { value: "react" }, "React"),
                        React.createElement(Checkbox, { value: "vue" }, "Vue"),
                        React.createElement(Checkbox, { value: "angular" }, "Angular"))),
                React.createElement(FormItem, { required: true, label: "Radio:" },
                    React.createElement(Radio.Group, { name: "radio", defaultValue: 'react' },
                        React.createElement(Radio, { value: "react" }, "React"),
                        React.createElement(Radio, { value: "vue" }, "Vue"),
                        React.createElement(Radio, { value: "angular" }, "Angular"))),
                React.createElement(FormItem, { required: true, label: "Range:" },
                    React.createElement(Range
                    // @ts-ignore
                    , { 
                        // @ts-ignore
                        name: "range", slider: "double", defaultValue: [10, 80] })),
                React.createElement(FormItem, { label: "Note:" },
                    React.createElement(Input.TextArea, { placeholder: "description", name: "a11yRemark", defaultValue: "Fusion \u662F\u4E00\u5957\u4F01\u4E1A\u7EA7\u4E2D\u540E\u53F0UI\u7684\u89E3\u51B3\u65B9\u6848\uFF0C\u81F4\u529B\u4E8E\u89E3\u51B3\u8BBE\u8BA1\u5E08\u4E0E\u524D\u7AEF\u5728\u4EA7\u54C1\u4F53\u9A8C\u4E00\u81F4\u6027\u3001\u5DE5\u4F5C\u534F\u540C\u3001\u5F00\u53D1\u6548\u7387\u65B9\u9762\u7684\u95EE\u9898\u3002\u901A\u8FC7\u534F\u52A9\u4E1A\u52A1\u7EBF\u6784\u5EFA\u8BBE\u8BA1\u7CFB\u7EDF\uFF0C\u63D0\u4F9B\u7CFB\u7EDF\u5316\u5DE5\u5177\u534F\u52A9\u8BBE\u8BA1\u5E08\u524D\u7AEF\u4F7F\u7528\u8BBE\u8BA1\u7CFB\u7EDF\uFF0C\u4E0B\u6E38\u63D0\u4F9B\u4E00\u7AD9\u5F0F\u8BBE\u8BA1\u9879\u76EE\u534F\u4F5C\u5E73\u53F0\uFF1B\u6253\u901A\u4E92\u8054\u7F51\u4EA7\u54C1\u4ECE\u8BBE\u8BA1\u5230\u5F00\u53D1\u7684\u5DE5\u4F5C\u6D41\u3002" })),
                React.createElement(FormItem, { label: "Upload:" },
                    React.createElement(Upload, { name: "upload", defaultValue: fileList, listType: "text" })),
                React.createElement(FormItem, { label: "Upload:" },
                    React.createElement(Upload, { name: "upload2", defaultValue: fileList, listType: "image" })),
                React.createElement(FormItem, { wrapperCol: { offset: 7 } },
                    React.createElement(Form.Submit, { validate: true, type: "primary", onClick: this.submitHandler }, "Submit"),
                    React.createElement(Form.Reset, { style: { marginLeft: 10 } }, "Reset")))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('form-demo-14'));
