import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import {
  createReduxContainer,
  createReactNavigationReduxMiddleware,
  createNavigationReducer
} from 'react-navigation-redux-helpers';
import { createLogger } from 'redux-logger';
import applyAppStateListener from 'redux-enhancer-react-native-appstate';
import thunkMiddleware from 'redux-thunk';

import ReduxNavigation from './src/navigation/ReduxNavigation';
import AppNavigator from './src/navigation/stacks';
import reducers from './src/redux/reducers';

const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers(
  Object.assign(
    {
      nav: navReducer
    },
    reducers
  )
);

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(state => state.nav);

const loggerMiddleware = createLogger({
  predicate: (getState, action) => __DEV__
});

export const App = createReduxContainer(AppNavigator);

function configureStore(initialState) {
  const enhancer = compose(
    applyAppStateListener(),
    applyMiddleware(middleware, thunkMiddleware, loggerMiddleware)
  );
  return createStore(appReducer, initialState, enhancer);
}

const store = configureStore({});

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ReduxNavigation />
      </Provider>
    );
  }
}