import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import * as Redux from 'redux';
import thunk from 'redux-thunk';

import { IPokemonAppExtraArguments } from 'app/types';

import { PokemonService } from 'api/PokemonService';

import { PokemonSelectListReducers } from 'app/components/PokemonSelectList/reducers';
import { PokemonExplorerReducers } from 'app/reducers';

import { ConnectedPokemonApp } from './PokemonApp';

export const appReducers = Redux.combineReducers({
    pokemonSelectListState: PokemonSelectListReducers,
    pokemonExplorerState: PokemonExplorerReducers,
});

const extraArguments : IPokemonAppExtraArguments = {
    services: {
        pokemonService: new PokemonService()
    }
};

const store = Redux.createStore(
    appReducers,
    // enableBatching(appReducers),
    Redux.applyMiddleware(
        thunk.withExtraArgument(extraArguments)
    )
);

ReactDOM.render(
    <Provider store={ store }>
        <Router>
            <Switch>
                <Route exact={ true } path="/" component={ ConnectedPokemonApp } />
                <Route exact={ true } path="/explorer" component={ ConnectedPokemonApp } />
            </Switch>
        </Router>
    </Provider>,
    document.getElementById('pokemon-mount')
);

// const BATCH_ACTION_TYPE = '_BATCHING_REDUCER_BATCH_ACTION_';

// // TODO Allow this to also take ThunkAction<any, any, any>
// export function batchActions(actions : Array<Redux.Action>) : Redux.Action {
//     return action(BATCH_ACTION_TYPE, actions);
// }

// // This is called in the Provider on all Reducers
// export function enableBatching(reducer : Redux.Reducer<any>) {
//     return function batchingReducer(state : any, action : Redux.Action) {
//         if (action && (action.type === BATCH_ACTION_TYPE)) {
//             const payload = (action as Redux.Action).payload;
//             return payload.reduce(batchingReducer, state);
//         }

//         return reducer(state, action);
//     };
// }
