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',
    },
  },
};

interface IClickMeProps {
  locale: {
    clickMe: string;
  };
  onClick: () => void;
}

class ClickMe extends React.Component<IClickMeProps> {
  static propTypes = {
    locale: PropTypes.object,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    locale: locales['zh-cn'].ClickMe,
  };

  render() {
    const { locale, onClick } = this.props;
    return (
      <Button onClick={onClick}>{locale.clickMe}</Button>
    );
  }
}

interface IToastProps {
  locale: {
    close: string;
  };
  afterClose: () => void;
  theme?: 'white' | 'grey';
}

class Toast extends React.Component<IToastProps> {
  static propTypes = {
    locale: PropTypes.object,
    afterClose: PropTypes.func,
  };

  static create: any;

  static defaultProps = {
    locale: locales['zh-cn'].Toast,
  };

  constructor(props) {
    super(props);

    this.state = {
      visible: false,
    };

    this.handleClose = this.handleClose.bind(this);
  }

  handleClose() {
    this.setState({
      visible: false,
    });
    this.props.afterClose();
  }

  render() {
    return (
      <div className="toast">
        <Button type="primary" onClick={this.handleClose}>
          {this.props.locale.close}
        </Button>
      </div>
    );
  }
}

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(<Toast afterClose={closeChain} locale={newLocale}/>, mountNode);
};

const NewClickMe = config(ClickMe);
const NewToast = config(Toast);

interface IDemoState {
  language: string;
}

class Demo extends React.Component<{}, IDemoState> {
  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 (
      <ConfigProvider locale={locales[language]} theme="white" prefix="next-">
        <div>
          <div className="select-language">
            <Select value={language} onChange={this.handleChangeLanguage}>
              <Option value="zh-cn">zh-cn</Option>
              <Option value="en-us">en-us</Option>
            </Select>
          </div>
          <NewClickMe onClick={this.handleClick} />
        </div>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById('config-provider-demo-1'));