import {
    fromEvent,
} from 'rxjs';
import {
    debounceTime,
} from 'rxjs/operators';

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

import {
    initScreenSizeReducer,
    setScreenSize,
} from './screen-size-store.actions';

import {
    DimensionsInterface,
} from './../../models/index';

export function getWindowDimensions(window: Window): DimensionsInterface {
    return {
        height: window.innerHeight,
        width: window.innerWidth,
    };
}

export function initScreenSize<T>(
    window: Window,
    store: Store<T>,
    tabletWidth: string,
    desktopWidth: string,
) {
    store.dispatch(initScreenSizeReducer({
        desktopCutoffWidth: parseInt(desktopWidth, 10),
        screenSize: getWindowDimensions(window),
        tabletCutoffWidth: parseInt(tabletWidth, 10),
    }));
}

export function connectScreenSizeActions<T>(window: Window, store: Store<T>) {
    fromEvent(window, 'resize').pipe(
        debounceTime(500),
    ).subscribe(() => store.dispatch(setScreenSize(
        getWindowDimensions(window),
    )));
}