import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import * as Redux from 'redux';
import thunk from 'redux-thunk';

import { IProviderExtraArguments } from 'common/models/IProviderExtraArguments';

import { IPokemonSelectListExtraArguments } from 'app/PokemonSelectList/types';

import { PokemonService } from 'api/PokemonService';

import { PokemonSelectListReducers } from './PokemonSelectList/reducers';

import { ConnectedPokemonApp } from './PokemonApp';

import 'styles/index.scss';

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

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

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

ReactDOM.render(
    <Provider store={ store }>
        <ConnectedPokemonApp />
    </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);
//     };
// }