import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider } from '@alifd/next';

const { config } = ConfigProvider;

interface IProps {
  prefix: string;
  locale: object;
}

class Output extends React.Component<IProps> {
  static propTypes = {
    prefix: PropTypes.string,
    locale: PropTypes.object,
  };

  static defaultProps = {
    prefix: 'next-',
    locale: {
      hello: '你好',
    },
  };

  render() {
    const { prefix, locale } = this.props;

    return (
      <ul>
        <li>prefix: {prefix}</li>
        <li>locale: {JSON.stringify(locale)}</li>
      </ul>
    );
  }
}

const Func = () => {
  return <div>This is a Function Component</div>;
};

const NewFunc = config(Func);
const NewOutput = config(Output);

class Demo extends React.Component {
  render() {
    return (
      <ConfigProvider prefix="custom-" locale={{ Output: { hello: 'hello' } }}>
        <div>
          <NewOutput />
          <NewFunc />
        </div>
      </ConfigProvider>
    );
  }
}

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