import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'rxr-react';
import { createState, createLoggerStream, startLogging, messageStreamsMonitor$ } from 'rxr';

import styles from './index.css';

import App from './components/App';

// our RxR reducers
import reducer$ from './reducers';

// we create initial state here
const initialState = {
  clients:        { data: [], ts: 0, status: undefined },
  filter:         '',
  selectedClient: '',
};

// and because in RxR is no need of store, we create state directly
const state$ = createState(reducer$, initialState);

// we will log all state changes  and messageStreams events to console
const loggerStream$ = createLoggerStream(state$, messageStreamsMonitor$);
startLogging(loggerStream$);

// RxR-React provides similar Provider component as React-Redux
render(
  <Provider state$={ state$ }>
    <App />
  </Provider>, document.getElementById('index')
);

import { connectWithState } from 'rxr-react';
import MyContainer from './MyContainer';
// lets's suppose that our userSelected$ stream was bound with next()
// (see RxR createPushMessageFunctions) and is part of userActions
// structure
import userActions from './userActions';

const selector = (state) => ({
  itemsSelected: state.itemsSelected,
  userSelected: myMessageStreams.userSelected,
});

const MyHoCContainer = connectWithState(selector)(MyContainer);