import { Type } from '@angular/core';
import {
  ActionReducer,
  ActionReducerMap,
  MetaReducer,
  createSelector,
} from '@ngrx/store';

import * as fromRouter from '@ngrx/router-store';

import { environment } from '../../environments/environment';

// import * as AppEventsStore from './events';
// import * as AppLayoutStore from './layout';
// import * as AppLoginStore from './login';
// import * as AppNicknameStore from './nickname';
import * as AppRouterStore from './router';

export const EFFECTS: Type<any>[] = [
  // AppLoginStore.Effects,
  // AppEventsStore.Effects,
  // AppNicknameStore.Effects,
  AppRouterStore.Effects,
];

export const REDUCERS: ActionReducerMap<any> = {
  router: fromRouter.routerReducer,
  // layout: AppLayoutStore.reducer,
  // events: AppEventsStore.reducer,
};

// console.log all actions
export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  return function (state: State, action: any): State {
    const result = reducer(state, action);
    console.groupCollapsed(action.type);
    console.log('prev state', state);
    console.log('action', action);
    console.log('next state', result);
    console.groupEnd();

    return result;
  };
}

export const META_REDUCERS: MetaReducer<State>[] = !environment.production
  ? [logger]
  : [];

export interface State {
  router: fromRouter.RouterReducerState;
  // layout: AppLayoutStore.State;
  // events: AppEventsStore.State;
}

export const AppRouterSelector = AppRouterStore.getSelectors(
  (state: State) => state.router,
);

// export const AppLayoutSelector = AppLayoutStore.getSelectors(
//   (state: State) => state.layout,
// );

// export const AppEventsSelector = AppEventsStore.getSelectors(
//   (state: State) => state.events,
// );
