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 { Button, Calendar, Card, DatePicker, DatePicker2, Dialog, Pagination, Radio, Select, Table, TimePicker, TimePicker2, Timeline, Transfer, 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 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 = {
            lang: 'en-us',
        };
        this.changeLang = this.changeLang.bind(this);
        this.showDialog = this.showDialog.bind(this);
    }
    changeLang(lang) {
        this.setState({
            lang,
        });
    }
    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];
        return (React.createElement("div", null,
            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(ConfigProvider, { locale: locale },
                React.createElement("div", { className: "locale-components" },
                    React.createElement(Button, { type: "primary", onClick: this.showDialog }, "Show Dialog"),
                    React.createElement(Select, { style: { width: '150px' }, dataSource: ['hello', 'bye'] }),
                    React.createElement(DatePicker, null),
                    React.createElement(TimePicker, null),
                    React.createElement(RangePicker, null),
                    React.createElement(DatePicker2, null),
                    React.createElement(TimePicker2, null),
                    React.createElement(RangePicker2, null),
                    React.createElement(Calendar, { style: {
                            width: '350px',
                            padding: '12px',
                            border: '1px solid #C4C6CF',
                            borderRadius: '3px',
                        }, shape: "card" }),
                    React.createElement(Pagination, { defaultCurrent: 2 }),
                    React.createElement(Transfer, { dataSource: transferDataSource, defaultValue: ['3'], defaultLeftChecked: ['1'], titles: ['Source', 'Target'] }),
                    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' })),
                    React.createElement(Upload.Dragger, { style: { width: '500px' }, listType: "image", action: "https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload", accept: "image/png, image/jpg, image/jpeg, image/gif, image/bmp" })))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('config-provider-demo-3'));
