// src/index.js
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';

import { combineContexts } from 'react-combine-contexts';

import * as LocaleContext from './LocaleContext';
import * as ThemeContext from './ThemeContext';

// This will return an object that contains a Provider and a Consumer
const CombinedContext = combineContexts({
  locale: LocaleContext, // Associate each Context to a key
  theme: ThemeContext,
});

const App = () => (
  <Fragment>
    {/* Use the Context Provider like you would use it with any other Context */}
    <CombinedContext.Provider>
      <Fragment>
        {/* Use multiple contexts with a single Consumer */}
        <CombinedContext.Consumer>
          {({ locale, theme }) => (
            <div style={{ color: theme.color, fontFamily: theme.fontFamily }}>
              <span>Selected locale is {locale.selectedLocale}</span>
              <div>
                <button onClick={() => locale.setLocale('en')}>en</button>
                <button onClick={() => locale.setLocale('fr')}>fr</button>
              </div>
            </div>
          )}
        </CombinedContext.Consumer>
        {/* It is still possible to use a scoped Consumer */}
        <ThemeContext.Consumer>
          {theme => <div>The main color is {theme.color}.</div>}
        </ThemeContext.Consumer>
      </Fragment>
    </CombinedContext.Provider>
  </Fragment>
);

ReactDOM.render(<App />, document.getElementById('root'));