'use strict';

import { getThumbnailData, getDesignViewLength, get2DModelSrc, getCurrentDesignView } from '../Selectors';

describe('Reducers/DesignView/Selectors', () => {
    test('getDesignViewLength returns the length of the views list', () => {
        const state1 = {
            configurator: {
                configuration: {
                    selectedVariantIdentifier: 'demo_hoodie_green_s',
                    item: {
                        identifier: 'demo_hoodie',
                    },
                },
            },
            designView: {
                designViews: [{ identifier: 'front' }, { identifier: 'rear' }, { identifier: 'side' }],
            },
        };
        expect(getDesignViewLength(state1)).toEqual(3);
    });

    describe('getThumbnailData', () => {
        test('returns the thumbnail data in dotMode if any thumbnail images are missing in visualizationData', () => {
            const state = {
                configurator: {
                    configuration: {
                        selectedVariantIdentifier: 'demo_hoodie_green_s',
                        item: {
                            identifier: 'demo_hoodie',
                        },
                    },
                },
                designView: {
                    designViews: [
                        {
                            identifier: 'front',
                        },
                        {
                            identifier: 'rear',
                        },
                        {
                            identifier: 'side',
                        },
                    ],
                    viewThumbnailImages: {
                        front: 'frontImage',
                        rear: 'rearImage',
                    },
                },
                configurationMode: {
                    selectedMode: 'creator',
                },
            };

            /*thumbnails are returned with the identifier in dotMode*/
            expect(getThumbnailData(state)).toEqual({
                dotMode: true,
                items: [
                    { identifier: 'front', thumbnailImage: 'frontImage' },
                    { identifier: 'rear', thumbnailImage: 'rearImage' },
                    { identifier: 'side' },
                ],
            });
        });

        test('returns thumbnail data NOT in dotMode if all thumbnail images are found in visualizationData', () => {
            const state = {
                configurator: {
                    selectedVariantIdentifier: 'demo_hoodie_blue_s',
                    configuration: {
                        item: {
                            identifier: 'demo_hoodie',
                        },
                    },
                },
                designView: {
                    designViews: [
                        {
                            identifier: 'front',
                        },
                        {
                            identifier: 'rear',
                        },
                        {
                            identifier: 'side',
                        },
                    ],
                    viewThumbnailImages: {
                        front: '/images/item/design_views/demo_hoodie/front_view.jpg',
                        rear: '/images/item/design_views/demo_hoodie/rear_view.jpg',
                        side: '/images/item/design_views/demo_hoodie/side_view.jpg',
                    },
                },
                configurationMode: {
                    selectedMode: 'creator',
                },
            };

            expect(getThumbnailData(state)).toEqual({
                dotMode: false,
                items: [
                    {
                        identifier: 'front',
                        thumbnailImage: '/images/item/design_views/demo_hoodie/front_view.jpg',
                    },
                    {
                        identifier: 'rear',
                        thumbnailImage: '/images/item/design_views/demo_hoodie/rear_view.jpg',
                    },
                    {
                        identifier: 'side',
                        thumbnailImage: '/images/item/design_views/demo_hoodie/side_view.jpg',
                    },
                ],
            });
        });

        test('returns the thumbnail data NOT in dotMode if the the images are missing in visualizationData but are available in the state under designView.thumbnails', () => {
            const state = {
                configurator: {
                    configuration: {
                        selectedVariantIdentifier: 'demo_hoodie_green_s',
                        item: {
                            identifier: 'demo_hoodie',
                        },
                    },
                },
                designView: {
                    designViews: [
                        {
                            identifier: 'front',
                            thumbnails: {
                                demo_hoodie: 'oldFrontImage',
                            },
                        },
                        {
                            identifier: 'rear',
                            thumbnails: {
                                demo_hoodie: 'oldRearImage',
                            },
                        },
                        {
                            identifier: 'side',
                            thumbnails: {
                                demo_hoodie: 'oldSideImage',
                            },
                        },
                    ],
                    viewThumbnailImages: {
                        front: 'frontImage',
                        rear: 'rearImage',
                    },
                },
                configurationMode: {
                    selectedMode: 'designer',
                },
            };

            expect(getThumbnailData(state)).toEqual({
                dotMode: false,
                items: [
                    {
                        identifier: 'front',
                        thumbnailImage: 'oldFrontImage',
                    },
                    {
                        identifier: 'rear',
                        thumbnailImage: 'oldRearImage',
                    },
                    {
                        identifier: 'side',
                        thumbnailImage: 'oldSideImage',
                    },
                ],
            });
        });

        test('returns the thumbnail data in dotMode if the the images are missing in visualizationData and designView.thumbnails is also not available', () => {
            const state = {
                configurator: {
                    configuration: {
                        selectedVariantIdentifier: 'demo_hoodie_green_s',
                        item: {
                            identifier: 'demo_hoodie',
                        },
                    },
                },
                designView: {
                    designViews: [
                        {
                            identifier: 'front',
                            thumbnails: null,
                        },
                        {
                            identifier: 'rear',
                            thumbnails: null,
                        },
                        {
                            identifier: 'side',
                            thumbnails: null,
                        },
                    ],
                    viewThumbnailImages: {},
                },
                configurationMode: {
                    selectedMode: 'designer',
                },
            };

            expect(getThumbnailData(state)).toEqual({
                dotMode: true,
                items: [
                    {
                        identifier: 'front',
                    },
                    {
                        identifier: 'rear',
                    },
                    {
                        identifier: 'side',
                    },
                ],
            });
        });
    });

    test('get2DModelSrc returns the correct src', () => {
        const stateWithSelectedVariant = {
            configurator: {
                selectedVariantIdentifier: 'demo_hoodie_green_s',
                configuration: {
                    item: {
                        identifier: 'demo_hoodie',
                    },
                },
            },
            designView: {
                selectedDesignView: {
                    images: {
                        demo_hoodie_green_s: '/fake-image-url',
                        demo_hoodie: '/fake-image-url2',
                    },
                },
            },
        };
        expect(get2DModelSrc(stateWithSelectedVariant, 'http://fakehost')).toEqual(
            'http://fakehost/fake-image-url'
        );

        const stateWithoutSelectedVariant = {
            configurator: {
                selectedVariantIdentifier: null,
                configuration: {
                    item: {
                        identifier: 'demo_hoodie',
                    },
                },
            },
            designView: {
                selectedDesignView: {
                    images: {
                        demo_hoodie_green_s: '/fake-image-url',
                        demo_hoodie: '/fake-image-url2',
                    },
                },
            },
        };
        expect(get2DModelSrc(stateWithoutSelectedVariant, 'http://fakehost')).toEqual(
            'http://fakehost/fake-image-url2'
        );

        const stateMissingImage = {
            configurator: {
                selectedVariantIdentifier: null,
                configuration: {
                    item: {
                        identifier: 'demo_hoodie',
                    },
                },
            },
            designView: {
                selectedDesignView: {
                    images: {},
                },
            },
        };
        expect(get2DModelSrc(stateMissingImage, 'http://fakehost')).toEqual(null);
    });

    test('get2DModelSrc returns the correct src if a designArea is selected', () => {
        const stateWithSelectedVariant = {
            configurator: {
                selectedVariantIdentifier: 'demo_hoodie_green_s',
                configuration: {
                    item: {
                        identifier: 'demo_hoodie',
                    },
                },
            },
            designView: {
                selectedDesignView: {
                    images: {
                        demo_hoodie_green_s: '/fake-image-url',
                        demo_hoodie: '/fake-image-url2',
                    },
                },
            },
            designArea: {
                selectedDesignArea: {
                    designView: {
                        images: {
                            demo_hoodie_green_s: '/fake-image-url-from-design-area',
                            demo_hoodie: '/fake-image-url2-from-design-area',
                        },
                    },
                },
            },
        };
        expect(get2DModelSrc(stateWithSelectedVariant, 'http://fakehost')).toEqual(
            'http://fakehost/fake-image-url-from-design-area'
        );
    });

    test('getCurrentDesignView returns the selected design view with the current design areas', () => {
        const designView = {
            identifier: 'side view',
            designAreas: [
                {
                    identifier: 'area1',
                    baseShape: { type: 'Plane', x: 50, y: 50, width: 400, height: 480 },
                    position: { x: 200, y: 240, width: 400, height: 480 },
                    width: 200,
                    height: 240,
                    designProductionMethods: [
                        {
                            identifier: 'embroidery',
                            width: 100,
                            height: 120,
                        },
                    ],
                },
            ],
        };
        const state = {
            configurator: {
                configuration: {
                    item: {
                        settings: {
                            visualizationDesigner: '2d',
                        },
                    },
                    designdata: {
                        area1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                    },
                },
            },
            configurationMode: {
                selectedMode: 'designer',
            },
            designView: {
                selectedDesignView: designView,
            },
        };
        expect(getCurrentDesignView(state)).toEqual({
            identifier: 'side view',
            designAreas: [
                {
                    identifier: 'area1',
                    baseShape: { type: 'Plane', x: 50, y: 50, width: 200, height: 240 },
                    position: { x: 100, y: 120, width: 200, height: 240 },
                    width: 200,
                    height: 240,
                    designProductionMethods: [
                        {
                            identifier: 'embroidery',
                            width: 100,
                            height: 120,
                        },
                    ],
                },
            ],
        });
    });
    test('getCurrentDesignView returns false if design view is not selected', () => {
        const state = {
            designView: { selectedDesignView: {} },
            designArea: {},
        };
        expect(getCurrentDesignView(state)).toEqual(false);
    });
    test('getCurrentDesignView orders the returned designAreas', () => {
        const designView = {
            identifier: 'side view',
            designAreas: [
                {
                    identifier: 'area1',
                    baseShape: { type: 'Plane', x: 0, y: 0, width: 100, height: 120 },
                    position: { x: 50, y: 60, width: 100, height: 120 },
                    designProductionMethods: [
                        {
                            identifier: 'print',
                        },
                    ],
                },
                {
                    identifier: 'area2',
                    baseShape: { type: 'Plane', x: 0, y: 0, width: 100, height: 200 },
                    position: { x: 50, y: 100, width: 100, height: 200 },
                    designProductionMethods: [
                        {
                            identifier: 'print',
                        },
                    ],
                },
            ],
        };
        const state = {
            configurator: {
                configuration: {
                    item: {
                        settings: {
                            visualizationDesigner: '2d',
                        },
                    },
                    designdata: {
                        area1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                        area2: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                    },
                },
            },
            configurationMode: {
                selectedMode: 'designer',
            },
            designView: {
                selectedDesignView: designView,
            },
        };

        const response = getCurrentDesignView(state);

        const smallerAreaIndex = response.designAreas.findIndex(a => a.identifier === 'area1');
        const largerAreaIndex = response.designAreas.findIndex(a => a.identifier === 'area2');

        expect(smallerAreaIndex > largerAreaIndex).toBe(true);
    });
});
