import './demo1.css';
import Button from '../../button';
import ConfigProvider from '../index';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '../../select';
const { config, getContextProps } = ConfigProvider;
const { Option } = Select;
const locales = {
    'zh-cn': {
        ClickMe: {
            clickMe: '点我！',
        },
        Toast: {
            close: '关闭',
        },
    },
    'en-us': {
        ClickMe: {
            clickMe: 'click me!',
        },
        Toast: {
            close: 'close',
        },
    },
};
class ClickMe extends React.Component {
    render() {
        const { locale, onClick } = this.props;
        return (React.createElement(Button, { onClick: onClick }, locale.clickMe));
    }
}
ClickMe.propTypes = {
    locale: PropTypes.object,
    onClick: PropTypes.func,
};
ClickMe.defaultProps = {
    locale: locales['zh-cn'].ClickMe,
};
class Toast extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        };
        this.handleClose = this.handleClose.bind(this);
    }
    handleClose() {
        this.setState({
            visible: false,
        });
        this.props.afterClose();
    }
    render() {
        return (React.createElement("div", { className: "toast" },
            React.createElement(Button, { type: "primary", onClick: this.handleClose }, this.props.locale.close)));
    }
}
Toast.propTypes = {
    locale: PropTypes.object,
    afterClose: PropTypes.func,
};
Toast.defaultProps = {
    locale: locales['zh-cn'].Toast,
};
Toast.create = (props = {}) => {
    const mountNode = document.createElement('div');
    document.body.appendChild(mountNode);
    const closeChain = () => {
        ReactDOM.unmountComponentAtNode(mountNode);
        document.body.removeChild(mountNode);
    };
    const newLocale = getContextProps(props, 'Toast').locale;
    ReactDOM.render(React.createElement(Toast, { afterClose: closeChain, locale: newLocale }), mountNode);
};
const NewClickMe = config(ClickMe);
const NewToast = config(Toast);
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            language: 'zh-cn',
        };
        this.handleClick = this.handleClick.bind(this);
        this.handleChangeLanguage = this.handleChangeLanguage.bind(this);
    }
    handleClick() {
        NewToast.create();
    }
    handleChangeLanguage(language) {
        this.setState({
            language,
        });
    }
    render() {
        const { language } = this.state;
        return (React.createElement(ConfigProvider, { locale: locales[language], theme: "white", prefix: "next-" },
            React.createElement("div", null,
                React.createElement("div", { className: "select-language" },
                    React.createElement(Select, { value: language, onChange: this.handleChangeLanguage },
                        React.createElement(Option, { value: "zh-cn" }, "zh-cn"),
                        React.createElement(Option, { value: "en-us" }, "en-us"))),
                React.createElement(NewClickMe, { onClick: this.handleClick }))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('config-provider-demo-1'));
