import './demo3.css';
import ConfigProvider from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import enUS from '../../locale/en-us';
import jaJP from '../../locale/ja-jp';
import ptPT from '../../locale/pt-pt';
import viVN from '../../locale/vi-vn';
import zhCN from '../../locale/zh-cn';
import { Box, Button, Calendar2, Card, Cascader, CascaderSelect, Collapse, DatePicker, DatePicker2, Dialog, Input, NumberPicker, Pagination, Radio, Search, Select, Tab, Table, Tag, TimePicker2, Timeline, Transfer, TreeSelect, Upload, } from '../..';
const localeMap = {
    'zh-cn': zhCN,
    'en-us': enUS,
    'ja-jp': jaJP,
    'vi-vn': viVN,
    'pt-pt': ptPT,
};
// If the application directly imports the next-with-locales.js file from cdn
// it need to import locale file in the following way
// import { locales } from '@alifd/next';
// const enUS = locales['en-us'];
// const zhCN = locales['zh-cn'];
const RangePicker = DatePicker.RangePicker;
const RangePicker2 = DatePicker2.RangePicker;
const Panel = Collapse.Panel;
const TreeNode = TreeSelect.Node;
const transferDataSource = (() => {
    const dataSource = [];
    for (let i = 0; i < 10; i++) {
        dataSource.push({
            label: `content ${i}`,
            value: `${i}`,
            disabled: i % 4 === 0,
        });
    }
    return dataSource;
})();
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            label: '',
            lang: 'en-us',
            theme: 'white',
            data: [],
            value1: 'apple',
        };
        this.changeLang = this.changeLang.bind(this);
        this.showDialog = this.showDialog.bind(this);
        this.changeTheme = this.changeTheme.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.onChange = this.onChange.bind(this);
        this.onSmallChange = this.onSmallChange.bind(this);
    }
    componentDidMount() {
        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')
            .then(response => response.json())
            .then(data => {
            data[1].disabled = true;
            this.setState({ data });
        })
            .catch(e => console.log(e));
    }
    handleChange(value, data, extra) {
        console.log(value, data, extra);
        this.setState({
            label: extra.selectedPath.map(d => d.label).join(' / '),
        });
    }
    onChange(value, e) {
        console.log(value, e.type, e.triggerType);
    }
    onSmallChange(value) {
        this.setState({
            value1: value,
        });
    }
    changeLang(lang) {
        this.setState({
            lang,
        });
    }
    changeTheme(theme) {
        this.setState({
            theme,
        });
    }
    showDialog() {
        Dialog.confirm({
            title: 'Confirm',
            content: 'Are you sure you want to delete all alert e-mails waiting in queue?',
        });
    }
    render() {
        const locale = localeMap[this.state.lang];
        const { theme } = this.state;
        return (React.createElement("div", { className: theme },
            React.createElement("div", { className: "change-locale" },
                React.createElement("span", { style: { marginRight: 16 } }, "Change locale of components: "),
                React.createElement(Radio.Group, { shape: "button", size: "large", defaultValue: "en-us", onChange: this.changeLang },
                    React.createElement(Radio, { value: "en-us" }, "English"),
                    React.createElement(Radio, { value: "zh-cn" }, "\u4E2D\u6587"),
                    React.createElement(Radio, { value: "ja-jp" }, "\u65E5\u672C\u8A9E"),
                    React.createElement(Radio, { value: "vi-vn" }, "Vi\u1EC7tName"),
                    React.createElement(Radio, { value: "pt-pt" }, "Portugu\u00EAs"))),
            React.createElement("br", null),
            React.createElement("div", { className: "change-theme" },
                React.createElement("span", { style: { marginRight: 16, marginTop: 16 } }, "Change theme of components: "),
                React.createElement(Radio.Group, { shape: "button", size: "large", defaultValue: "white", onChange: this.changeTheme },
                    React.createElement(Radio, { value: "white" }, "White"),
                    React.createElement(Radio, { value: "grey" }, "Grey"))),
            React.createElement(ConfigProvider, { locale: locale, theme: theme },
                React.createElement("div", { className: "locale-components" },
                    React.createElement(Button, { type: "primary", onClick: this.showDialog }, "Show Dialog"),
                    React.createElement(Search, null),
                    React.createElement(Input, null),
                    React.createElement(Select, { style: { width: '150px' }, dataSource: ['hello', 'bye'] }),
                    React.createElement(Calendar2, { style: {
                            width: '500px',
                            padding: '12px',
                            border: '1px solid #C4C6CF',
                            borderRadius: '3px',
                        }, shape: "card" }),
                    React.createElement(Cascader, { dataSource: this.state.data, onChange: this.handleChange }),
                    React.createElement(CascaderSelect, { dataSource: this.state.data, onChange: this.handleChange }),
                    React.createElement(Collapse, null,
                        React.createElement(Panel, { title: "simple tile" }, "Promotions are marketing campaigns ran by Marketplace. Participate to sale your products during that promotion and make a profit"),
                        React.createElement(Panel, { title: "What are Promotion Products?" }, "Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range. You can choose which products should be available for the promotion. Not all Products of you will be available, because Promotions will only attract certain Product areas."),
                        React.createElement(Panel, { title: "Why can i not submit a higher price?" }, "The Promotion requires a certain price to make sure that our customers are attracted."),
                        React.createElement(Panel, { title: "What is Promo Stock?", disabled: true }, "Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.")),
                    React.createElement(DatePicker, null),
                    React.createElement(RangePicker, null),
                    React.createElement(DatePicker2, null),
                    React.createElement(TimePicker2, null),
                    React.createElement(RangePicker2, null),
                    React.createElement(NumberPicker, { defaultValue: 0, type: "inline", onChange: this.onChange }),
                    React.createElement(Pagination, { defaultCurrent: 2 }),
                    React.createElement(Radio.Group, { dataSource: [
                            {
                                value: 'apple',
                                label: 'Apple',
                                disabled: false,
                            },
                            {
                                value: 'pear',
                                label: 'Pear',
                            },
                            {
                                value: 'orange',
                                label: 'Orange',
                                disabled: true,
                            },
                        ], shape: "button", size: "small", value: this.state.value1, onChange: this.onSmallChange, type: 'outline' }),
                    React.createElement(Tab, { shape: "wrapped" },
                        React.createElement(Tab.Item, { title: "Tab 1", key: "1" }, "Tab 1 Content"),
                        React.createElement(Tab.Item, { title: "Tab 2", key: "2" }, "Tab 2 Content"),
                        React.createElement(Tab.Item, { title: "Tab 3", key: "3", disabled: true }, "Tab 3 Content")),
                    React.createElement(Box, { direction: "row", className: "tag-list", spacing: 20 },
                        React.createElement(Tag, { type: "normal" }, "Normal Tag"),
                        React.createElement(Tag, { type: "primary" }, "Primary Tag")),
                    React.createElement(TreeSelect, { treeDefaultExpandAll: true, style: { width: 200 } },
                        React.createElement(TreeNode, { key: "1", 
                            // @ts-ignore
                            value: "1", label: "Component" },
                            React.createElement(TreeNode, { key: "2", 
                                // @ts-ignore
                                value: "2", label: "Form" },
                                React.createElement(TreeNode, { key: "4", 
                                    // @ts-ignore
                                    value: "4", label: "Input" }),
                                React.createElement(TreeNode, { key: "5", 
                                    // @ts-ignore
                                    value: "5", label: "Select", disabled: true })),
                            React.createElement(TreeNode, { key: "3", 
                                // @ts-ignore
                                value: "3", label: "Display" },
                                React.createElement(TreeNode, { key: "6", 
                                    // @ts-ignore
                                    value: "6", label: "Table" })))),
                    React.createElement(Transfer, { dataSource: transferDataSource, defaultValue: ['3'], defaultLeftChecked: ['1'], titles: ['Source', 'Target'] }),
                    React.createElement(Upload.Dragger, { listType: "image", action: "https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload", accept: "image/png, image/jpg, image/jpeg, image/gif, image/bmp" }),
                    React.createElement(Table, { style: { width: '500px' }, dataSource: [] },
                        React.createElement(Table.Column, { title: "Name", dataIndex: "name", filters: [
                                { label: 'Filter 1', value: '1' },
                                { label: 'Filter 2', value: '2' },
                            ] }),
                        React.createElement(Table.Column, { title: "Age", dataIndex: "age" })),
                    React.createElement(Card, { style: { width: '300px' }, title: "Title" },
                        React.createElement("div", { style: { height: '250px', background: '#F7F8FA' } })),
                    React.createElement(Timeline, { fold: [{ foldArea: [1, 2], foldShow: true }] },
                        React.createElement(Timeline.Item, { title: "Signed", content: "Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service", time: '2016-06-10 10:30:00', state: "process" }),
                        React.createElement(Timeline.Item, { title: "Ship", content: "Express has arrived in Hangzhou, Zhejiang Binjiang company", time: '2016-06-10 09:30:00' }),
                        React.createElement(Timeline.Item, { title: "Ship", content: "Zhejiang Hangzhou Riverside company sent a member for you to send pieces", time: '2016-06-10 09:03:00' }),
                        React.createElement(Timeline.Item, { title: "Ship", content: "Zhejiang Hangzhou Transshipment Center has been issued", time: '2016-06-10 06:10:00' }))))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('config-provider-demo-3'));
