import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { createContainer } from 'unstated-next';
import { combineProviders } from 'react-combine-provider';

const useCounter1 = (initialState = 1) => {
    const [count, setCount] = useState(initialState);
    const decrement = () => setCount(count - 1);
    const increment = () => setCount(count + 1);
    return { count, decrement, increment };
};

const Counter1 = createContainer(useCounter1);

const useCounter2 = (initialState = 2) => {
  const [count, setCount] = useState(initialState);
  const decrement = () => setCount(count - 2);
  const increment = () => setCount(count + 2);
  return { count, decrement, increment };
};

const Counter2 = createContainer(useCounter2);

function CounterDisplay1() {
  const counter1 = Counter1.useContainer();
  console.log('rendering');
  return (
    <div>
      <div>counter display 1</div>
      <div>counter 1</div>
      <button onClick={counter1.decrement}>-</button>
      <span>{counter1.count}</span>
      <button onClick={counter1.increment}>+</button>
      <br />
    </div>
  );
}

function CounterDisplay2() {
  const counter1 = Counter1.useContainer();
  const counter2 = Counter2.useContainer();
  return (
    <div>
      <div>counter display 2</div>
      <div>counter 1</div>
      <button onClick={counter1.decrement}>-</button>
      <span>{counter1.count}</span>
      <button onClick={counter1.increment}>+</button>
      <div>counter 2</div>
      <button onClick={counter2.decrement}>-</button>
      <span>{counter2.count}</span>
      <button onClick={counter2.increment}>+</button>
      <br />
    </div>
  );
}

const StateProviders = combineProviders([
  [Counter1.Provider, { initialState: 5 }],
  Counter2.Provider,
]);

function App() {
  return (
    <StateProviders>
      <CounterDisplay1 />
      <br />
      <CounterDisplay2 />
    </StateProviders>
  );
}

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