import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import {
  StoreRouterConnectingModule,
  RouterStateSerializer,
  RouterReducerState,
} from '@ngrx/router-store';
import { EffectsModule } from '@ngrx/effects';
import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';

import { SimpleRouterStateSerializer } from './commons/util/ngrx/router-store/serializer/simple-router-state-serializer';

import { environment } from '../environments/environment';
import * as AppStore from './commons/store';


@NgModule({
  exports: [
    StoreModule,
  ],
  imports: [
    StoreModule.forRoot(AppStore.REDUCERS),
    /**
     * @ngrx/router-store keeps router state up-to-date in the store.
     */
    StoreRouterConnectingModule.forRoot({
      /*
        They stateKey defines the name of the state used by the router-store reducer.
        This matches the key defined in the map of reducers
      */
      stateKey: 'router',
    }),
    /**
     * Store devtools instrument the store retaining past versions of state
     * and recalculating new states. This enables powerful time-travel
     * debugging.
     *
     * To use the debugger, install the Redux Devtools extension for either
     * Chrome or Firefox
     *
     * See: https://github.com/zalmoxisus/redux-devtools-extension
     */
    StoreDevtoolsModule.instrument({
      name: 'overFlow WebApp DevTools',
      maxAge: 50,
      logOnly: environment.production,
    }),
    EffectsModule.forRoot(AppStore.EFFECTS),
  ],
  providers: [
    /**
     * The `RouterStateSnapshot` provided by the `Router` is a large complex structure.
     * A custom RouterStateSerializer is used to parse the `RouterStateSnapshot` provided
     * by `@ngrx/router-store` to include only the desired pieces of the snapshot.
     */
    { provide: RouterStateSerializer, useClass: SimpleRouterStateSerializer },
  ],

})
export class AppStoreModule { }