import {
    createFeatureSelector,
    createSelector,
} from '@ngrx/store';

import {
    ScreenSizeStateInterface,
} from './screen-size-state.interface';

export const selectScreenSizeState =
    createFeatureSelector<ScreenSizeStateInterface>('screenSizeStoreReducer');

export const selectScreenSize = createSelector(
    selectScreenSizeState,
    (screenSize) => screenSize.screenSize,
);

export const selectScreenSizeWidth = createSelector(
    selectScreenSize,
    (screenSize) => screenSize.width,
);

export const selectScreenSizeTabletCutoff = createSelector(
    selectScreenSizeState,
    (screenSize) => screenSize.tabletCutoffWidth,
);

export const selectScreenSizeDesktopCutoff = createSelector(
    selectScreenSizeState,
    (screenSize) => screenSize.desktopCutoffWidth,
);

export const selectScreenSizeIsDesktop = createSelector(
    selectScreenSizeWidth,
    selectScreenSizeDesktopCutoff,
    (screenSizeWidth, desktopCutoff) => screenSizeWidth >= desktopCutoff,
);

export const selectScreenSizeIsTablet = createSelector(
    selectScreenSizeWidth,
    selectScreenSizeTabletCutoff,
    selectScreenSizeDesktopCutoff,
    (
        screenSizeWidth,
        tabletCutoff,
        desktopCutoff,
    ) => screenSizeWidth < desktopCutoff && screenSizeWidth >= tabletCutoff,
);

export const selectScreenSizeIsAboveTablet = createSelector(
    selectScreenSizeWidth,
    selectScreenSizeTabletCutoff,
    (
        screenSizeWidth,
        tabletCutoff,
    ) => screenSizeWidth >= tabletCutoff,
);

export const selectScreenSizeIsMobile = createSelector(
    selectScreenSizeWidth,
    selectScreenSizeTabletCutoff,
    (screenSizeWidth, tabletCutoff) => screenSizeWidth < tabletCutoff,
);