import {
    APP_BOOTSTRAP_LISTENER,
    NgModule,
} from '@angular/core';

import {
    Store,
} from '@ngrx/store';

import {
    connectScreenSizeActions,
    initScreenSize,
} from './screen-size-store.connect';

export function setupScreenSizeStore<T>(
    store: Store<T>,
    window: Window,
    tabletWidth: string,
    desktopWidth: string,
) {
    // This needs to be a function to stop AOT complaining.
    // tslint:disable-next-line
    return function() {
        connectScreenSizeActions(window, store);
        initScreenSize(window, store, tabletWidth, desktopWidth);
    };
}

export const provideScreenSizeConnector = {
    deps: [Store, 'window', 'tabletWidth', 'desktopWidth'],
    multi: true,
    provide: APP_BOOTSTRAP_LISTENER,
    useFactory: setupScreenSizeStore,
};

/**
 * Generates a store slice for screen size that is automatically updated
 * whenever the user resizes the window (after a debounce time).
 *
 * To use:
 * Add ScreenSizeStoreModule.forRoot() in the root module
 * (_shared.app.module.ts) imports to register the store.
 * Add screenSizeStoreReducer to the reducers to add the reducers.
 * E.g StoreModule.forRoot({...reducers, screenSizeStoreReducer})
 * Provide values for tabletWidth and desktopWidth. Ideally these should be
 * pulled from the scss settings so things don't get out of sync.
 */
@NgModule({})
export class ScreenSizeStoreModule {
    public static forRoot() {
        return {
            ngModule: ScreenSizeStoreModule,
            providers: [
                provideScreenSizeConnector,
            ],
        };
    }
}