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

import {
    selectScreenSize,
    selectScreenSizeDesktopCutoff,
    selectScreenSizeIsAboveTablet,
    selectScreenSizeIsDesktop,
    selectScreenSizeIsMobile,
    selectScreenSizeIsTablet,
    selectScreenSizeState,
    selectScreenSizeTabletCutoff,
    selectScreenSizeWidth,
} from './screen-size-store.selectors';

describe('selectScreenSizeState', () => {
    test('Gets the screenSizeStoreReducer from the state', () => {
        const state = {
            screenSizeStoreReducer: {} as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeState(state);

        expect(result).toBe(state.screenSizeStoreReducer);
    });
});

describe('selectScreenSize', () => {
    test('Gets the screenSize from the state', () => {
        const state = {
            screenSizeStoreReducer: {
                screenSize: {},
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSize(state);

        expect(result).toBe(state.screenSizeStoreReducer.screenSize);
    });
});

describe('selectScreenSizeWidth', () => {
    test('Gets the screenSize width from the state', () => {
        const state = {
            screenSizeStoreReducer: {
                screenSize: {
                    width: 100,
                },
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeWidth(state);

        expect(result).toBe(100);
    });
});

describe('selectScreenSizeTabletCutoff', () => {
    test('Gets the tabletCutoffWidth from the state', () => {
        const state = {
            screenSizeStoreReducer: {
                tabletCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeTabletCutoff(state);

        expect(result).toBe(100);
    });
});

describe('selectScreenSizeDesktopCutoff', () => {
    test('Gets the desktopCutoffWidth from the state', () => {
        const state = {
            screenSizeStoreReducer: {
                desktopCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeDesktopCutoff(state);

        expect(result).toBe(100);
    });
});

describe('selectScreenSizeIsDesktop', () => {
    // tslint:disable-next-line
    test('Returns true if the screenSize width equals the desktop cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                desktopCutoffWidth: 100,
                screenSize: {
                    width: 100,
                },
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsDesktop(state);

        expect(result).toBe(true);
    });

    // tslint:disable-next-line
    test('Returns false if the screenSize width is less than the desktop cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                desktopCutoffWidth: 100,
                screenSize: {
                    width: 99,
                },
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsDesktop(state);

        expect(result).toBe(false);
    });
});

describe('selectScreenSizeIsTablet', () => {
    // tslint:disable-next-line
    test('Returns true if the screenSize width equals the tablet cut off and is less than the desktopCutoff', () => {
        const state = {
            screenSizeStoreReducer: {
                desktopCutoffWidth: 101,
                screenSize: {
                    width: 100,
                },
                tabletCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsTablet(state);

        expect(result).toBe(true);
    });

    // tslint:disable-next-line
    test('Returns false if the screenSize width is equal to the desktop cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                desktopCutoffWidth: 100,
                screenSize: {
                    width: 100,
                },
                tabletCutoffWidth: 90,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsTablet(state);

        expect(result).toBe(false);
    });

    // tslint:disable-next-line
    test('Returns false if the screenSize width is less than the tablet cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                desktopCutoffWidth: 101,
                screenSize: {
                    width: 99,
                },
                tabletCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsTablet(state);

        expect(result).toBe(false);
    });
});

describe('selectScreenSizeIsAboveTablet', () => {
    // tslint:disable-next-line
    test('Returns true if the screenSize width equals the tablet cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                screenSize: {
                    width: 100,
                },
                tabletCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsAboveTablet(state);

        expect(result).toBe(true);
    });

    // tslint:disable-next-line
    test('Returns false if the screenSize width is less than the tablet cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                screenSize: {
                    width: 99,
                },
                tabletCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsAboveTablet(state);

        expect(result).toBe(false);
    });
});

describe('selectScreenSizeIsMobile', () => {
    // tslint:disable-next-line
    test('Returns false if the screenSize width equals the tablet cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                screenSize: {
                    width: 100,
                },
                tabletCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsMobile(state);

        expect(result).toBe(false);
    });

    // tslint:disable-next-line
    test('Returns true if the screenSize width is less than the tablet cut off', () => {
        const state = {
            screenSizeStoreReducer: {
                screenSize: {
                    width: 99,
                },
                tabletCutoffWidth: 100,
            } as ScreenSizeStateInterface,
        };

        const result = selectScreenSizeIsMobile(state);

        expect(result).toBe(true);
    });
});