import './demo4.css';
import ConfigProvider from '..';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';

const localeSettings = {
  momentLocale: 'fr-FR',
  CustomizedComponent: {
    helloWorld: 'hello, world',
  },
};

const App = ({ children }) => (
  <ConfigProvider
    prefix="customized-"
    locale={localeSettings}
    pure
    warning={false}
  >
    {children}
  </ConfigProvider>
);

App.propTypes = {
  children: PropTypes.node,
};

const Child = () => (
  // @ts-ignore
  <ConfigProvider.Consumer>
    {context => (
      <div className="context-data">
        <h3>Context's state</h3>
        <pre>{JSON.stringify(context, undefined, 2)}</pre>
      </div>
    )}
    {/* @ts-ignore */}
  </ConfigProvider.Consumer>
);

const Demo = () => (
  <App>
    <Child />
  </App>
);

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