'use strict';

import {
    getActiveDesignAreas,
    getCameraViewListForDesignAreaList,
    getCanvasSizeFromDesignProductionMethod,
    getDesignDataColorAmounts,
    getDesignDataForFilteredDesignAreas,
    getFirstEditedDesignAreafromDesignData,
    getEngravingBackgroundColor,
    getFontSizeMin,
    getSelectedDesignProductionMethodForDesignArea,
    getSelectedViewName,
    getVisualizationEffect,
    getVisualizationEffectWithOptions,
    hasEngravingBackgroundColor,
    isColoringDisabled,
    isAnyDesignAreaSelected,
    isHighlighted,
    getColorsFromCanvasDataWithPalette,
    createColorData,
    parseColorData,
    isActiveBulkName,
    getDefaultDesignAreaIdentifierFromProductionMethod,
    getDefaultColorsFromDesignProductionMethod,
    getDefaultTextColor,
    isValidHex,
    hexToRgb,
    rgbToHex,
    rgbString2hex,
    hasSelectedBulkName,
    isBulkNamesSelected,
    isPlaceholderContent,
    contentHasText,
    getDesignAreaIdentifierToOpen,
    getAvailableColorsForDesignProductionMethod,
    getUsedColorsForDesignAreas,
    hasPlaceHolderImagesForActiveDesignArea,
    getDesignAreaImageCompatibilityInfo,
    areHashesCompatible,
    getCurrentCompatibilityInfoHash,
    getVectorizedImageColor,
    areAllDesignAreasEmpty,
    hasLastEditedDesignArea,
    hexToRgbNumbers,
    calculateColorDistance,
    getDesignAreaColorAmount,
    getDesignAreaPreSelection,
    designProductionMethodHasEmbroideryVisualizationEffect,
    getElementLockState,
} from '../Selectors';
import { setConf } from '../../../configuration';

describe('Reducers/DesignArea/Selectors', () => {
    test('getActiveDesignAreas returns the correct design area mapping (identifier -> true/false) for complete state', () => {
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        front: {
                            canvasData: {
                                objects: [{ type: 'Text' }],
                            },
                        },
                        back: null,
                    },
                },
            },
            designArea: {
                filteredDesignAreas: [{ identifier: 'front' }, { identifier: 'back' }],
            },
        };
        expect(getActiveDesignAreas(state)).toEqual({
            front: true,
            back: false,
        });
    });
    test('getActiveDesignAreas returns the correct design area mapping (identifier -> true/false) for incomplete state', () => {
        const state1 = {
            configurator: {
                configuration: {},
            },
            designArea: {
                filteredDesignAreas: [{ identifier: 'front' }, { identifier: 'back' }],
            },
        };
        const state2 = {
            configurator: {
                configuration: {},
            },
            designArea: {
                filteredDesignAreas: [],
            },
        };
        expect(getActiveDesignAreas(state1)).toEqual({
            front: false,
            back: false,
        });
        expect(getActiveDesignAreas(state2)).toEqual({});
    });
    test('hasPlaceHolderImagesForActiveDesignArea returns true when the active design area has placeholder image object', () => {
        const mockState = {
            configurator: {
                configuration: {
                    designdata: {
                        front: {
                            canvasData: {
                                objects: [
                                    {
                                        imageData: {
                                            isPlaceHolderImage: false,
                                        },
                                        type: 'Image',
                                    },
                                    {
                                        imageData: {
                                            isPlaceHolderImage: true,
                                        },
                                        type: 'Image',
                                    },
                                ],
                            },
                        },
                    },
                },
            },
            designArea: {
                selectedDesignArea: { identifier: 'front' },
            },
        };
        expect(hasPlaceHolderImagesForActiveDesignArea(mockState)).toEqual(true);
    });
    test('getSelectedViewName returns "default" when the design area object is empty', () => {
        expect(getSelectedViewName({})).toEqual('default');
    });
    test('getSelectedViewName returns the correct camera view name (used for 3D)', () => {
        expect(
            getSelectedViewName({
                identifier: 'firstDesignArea',
                customData: {
                    selectedCameraView: 'firstView',
                },
            })
        ).toEqual('firstView');
    });
    test(
        'getSelectedViewName returns the design view identifier (used for 2D) ' +
            'if the selectedCameraView is not provided in the customData',
        () => {
            expect(
                getSelectedViewName({
                    identifier: 'firstDesignArea',
                    customData: {},
                    designView: {
                        identifier: 'front_view',
                    },
                })
            ).toEqual('front_view');
        }
    );
    test(
        'getSelectedViewName returns the design area identifier ' +
            'if the selectedCameraView is not provided in the customData',
        () => {
            expect(
                getSelectedViewName({
                    identifier: 'firstDesignArea',
                    customData: {},
                })
            ).toEqual('firstDesignArea');
        }
    );
    test('isHighlighted reads the correct value from the state', () => {
        expect(
            isHighlighted({
                designArea: {
                    showHighlight: false,
                },
            })
        ).toEqual(false);
        expect(
            isHighlighted({
                designArea: {
                    showHighlight: true,
                },
            })
        ).toEqual(true);
        expect(
            isHighlighted({
                designArea: {},
            })
        ).toEqual(false);
    });
    test('getDesignDataColorAmounts returns the correct design area color amounts', () => {
        const state1 = {
            configurator: {
                configuration: {},
            },
        };
        const state2 = {
            configurator: {
                configuration: {
                    designdata: {
                        a_1: {
                            colorAmount: 2,
                        },
                        c_2: {
                            colorAmount: 1,
                        },
                    },
                },
            },
        };
        expect(getDesignDataColorAmounts(state1)).toEqual({});
        expect(getDesignDataColorAmounts(state2)).toEqual({
            a_1: 2,
            c_2: 1,
        });
    });
    test('getDesignDataForFilteredDesignAreas returns the correct design area mapping for filtered Design', () => {
        const state1 = {
            configurator: {
                configuration: {},
            },
            designArea: {
                filteredDesignAreas: [{ identifier: 'a_1' }, { identifier: 'a_2' }],
            },
        };
        const state2 = {
            configurator: {
                configuration: {
                    designdata: {
                        a_1: {
                            canvasData: {
                                objects: [
                                    {
                                        content: '<div></div>',
                                        type: 'Text',
                                    },
                                ],
                            },
                        },
                    },
                },
            },
            designArea: {
                filteredDesignAreas: [{ identifier: 'a_1' }, { identifier: 'a_2' }],
            },
        };
        expect(getDesignDataForFilteredDesignAreas(state1)).toEqual({
            a_1: false,
            a_2: false,
        });
        expect(getDesignDataForFilteredDesignAreas(state2)).toEqual({
            a_1: true,
            a_2: false,
        });
    });
    test('getDesignAreaIdentifierToOpen returns designArea identifier', () => {
        const state = {
            designArea: {
                selectedDesignArea: { identifier: 'a_2' },
                previousEditedDesignArea: {},
            },
            designView: {
                selectedDesignView: {
                    identifier: '01_side',
                },
            },
            configurator: {
                configuration: {
                    designdata: {
                        c_2: {
                            canvasData: null,
                        },
                        a_2: {
                            canvasData: {
                                objects: [{ type: 'Text' }],
                            },
                        },
                    },
                },
            },
        };
        expect(getDesignAreaIdentifierToOpen(state)).toEqual('a_2');
    });
    test('getFirstEditedDesignAreafromDesignData does not fail if the state data is incomplete, returns false', () => {
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        a_1: {
                            canvasData: {
                                objects: [],
                            },
                        },
                        c_1: {
                            canvasData: {
                                objects: [{ type: 'Text' }],
                            },
                        },
                        a_2: {
                            canvasData: null,
                        },
                        c_2: {
                            canvasData: {
                                objects: [{ type: 'Text' }],
                            },
                        },
                    },
                },
            },
        };
        expect(getFirstEditedDesignAreafromDesignData(state)).toEqual('c_1');
    });
    test('hasEngravingBackgroundColors does not fail if the state data is incomplete, returns false', () => {
        const mockGlobalState = {
            configurator: {
                // no designdata, the user has not selected the design production method yet
                configuration: {},
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: null, // incomplete data
                        },
                    ],
                },
            },
        };
        expect(hasEngravingBackgroundColor(mockGlobalState)).toBe(false);
    });
    test('hasEngravingBackgroundColors selects the correct value', () => {
        const mockGlobalState = {
            configurator: {
                // no designdata, the user has not selected the design production method yet
                configuration: {},
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: {
                                visualizationEffect: 'engraving',
                            },
                        },
                    ],
                },
            },
        };
        expect(hasEngravingBackgroundColor(mockGlobalState)).toBe(true);
    });
    test(
        'hasEngravingBackgroundColors selects the correct value ' +
            'if the design production method is selected',
        () => {
            const mockGlobalState = {
                configurator: {
                    configuration: {
                        // the designdata contains the selected design production method
                        designdata: {
                            front: {
                                designProductionMethodIdentifier: 'print2',
                            },
                        },
                    },
                },
                designArea: {
                    selectedDesignArea: {
                        identifier: 'front',
                        designProductionMethods: [
                            {
                                identifier: 'print',
                                options: {
                                    visualizationEffect: 'engraving',
                                },
                            },
                            {
                                identifier: 'print2',
                                options: {
                                    visualizationEffect: 'embossing',
                                },
                            },
                        ],
                    },
                },
            };
            expect(hasEngravingBackgroundColor(mockGlobalState)).toBe(false);
        }
    );
    test(
        'hasEngravingBackgroundColors selects the correct value ' +
            'for the given design production method identifier',
        () => {
            const mockGlobalState = {
                configurator: {
                    configuration: {
                        // the state already contains the selected design production method
                        designdata: {
                            front: {
                                designProductionMethodIdentifier: 'print2',
                            },
                        },
                    },
                },
                designArea: {
                    selectedDesignArea: {
                        identifier: 'front',
                        designProductionMethods: [
                            {
                                identifier: 'print',
                                options: {
                                    visualizationEffect: 'engraving',
                                },
                            },
                            {
                                identifier: 'print2',
                                options: {
                                    visualizationEffect: 'embossing',
                                },
                            },
                        ],
                    },
                },
            };
            // in the call we provide the requested design production method identifier
            expect(hasEngravingBackgroundColor(mockGlobalState, 'print')).toBe(true);
        }
    );
    test('isColoringDisabled does not fail if the state data is incomplete, returns false', () => {
        const mockGlobalState = {
            configurator: {
                // no designdata, the user has not selected the design production method yet
                configuration: {},
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: null, // incomplete data
                        },
                    ],
                },
            },
        };
        expect(isColoringDisabled(mockGlobalState)).toBe(false);
    });
    test('isColoringDisabled selects the correct value', () => {
        const engravingMockGlobalState = {
            configurator: {
                // no designdata, the user has not selected the design production method yet
                configuration: {},
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: {
                                visualizationEffect: 'engraving', // should be returned
                            },
                        },
                    ],
                },
            },
        };

        expect(isColoringDisabled(engravingMockGlobalState)).toBe(true);

        const notEngravingMockGlobalState = {
            configurator: {
                // no designdata, the user has not selected the design production method yet
                configuration: {},
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: {
                                visualizationEffect: 'notEngraving', // should be returned
                            },
                        },
                    ],
                },
            },
        };

        expect(isColoringDisabled(notEngravingMockGlobalState)).toBe(false);
    });
    test(
        'isColoringDisabled selects the correct value ' + 'if the design production method is selected',
        () => {
            const mockGlobalState = {
                configurator: {
                    configuration: {
                        // the designdata contains the selected design production method
                        designdata: {
                            front: {
                                designProductionMethodIdentifier: 'print2',
                            },
                        },
                    },
                },
                designArea: {
                    selectedDesignArea: {
                        identifier: 'front',
                        designProductionMethods: [
                            {
                                identifier: 'print',
                                options: {
                                    visualizationEffect: 'notEngraving',
                                },
                            },
                            {
                                identifier: 'print2',
                                options: {
                                    visualizationEffect: 'engraving', // should be returned
                                },
                            },
                        ],
                    },
                },
            };
            expect(isColoringDisabled(mockGlobalState)).toBe(true);
        }
    );
    test(
        'isColoringDisabled selects the correct value ' + 'for the given design production method identifier',
        () => {
            const mockGlobalState = {
                configurator: {
                    configuration: {
                        // the state already contains the selected design production method
                        designdata: {
                            front: {
                                designProductionMethodIdentifier: 'print2',
                            },
                        },
                    },
                },
                designArea: {
                    selectedDesignArea: {
                        identifier: 'front',
                        designProductionMethods: [
                            {
                                identifier: 'print',
                                options: {
                                    visualizationEffect: 'engraving', // should be returned
                                },
                            },
                            {
                                identifier: 'print2',
                                options: {
                                    visualizationEffect: 'notEngraving',
                                },
                            },
                        ],
                    },
                },
            };
            // in the call we provide the requested design production method identifier
            expect(isColoringDisabled(mockGlobalState, 'print')).toBe(true);
        }
    );
    test('getFontSizeMin does not fail if the state data is incomplete, returns 5', () => {
        const mockGlobalState = {
            configurator: {
                // no designdata, the user has not selected the design production method yet
                configuration: {},
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: null, // incomplete data
                        },
                    ],
                },
            },
        };
        expect(getFontSizeMin(mockGlobalState)).toBe(5);
    });
    test('getFontSizeMin selects the correct value', () => {
        const mockGlobalState = {
            configurator: {
                // no designdata, the user has not selected the design production method yet
                configuration: {},
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: {
                                minFontSize: 8, // should be returned
                            },
                        },
                    ],
                },
            },
        };
        expect(getFontSizeMin(mockGlobalState)).toBe(8);
    });
    test('getFontSizeMin selects the correct value for the given design production method identifier', () => {
        const mockGlobalState = {
            configurator: {
                configuration: {
                    // the state already contains the selected design production method
                    designdata: {
                        front: {
                            designProductionMethodIdentifier: 'print2',
                        },
                    },
                },
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: {
                                minFontSize: 12, // should be returned
                            },
                        },
                        {
                            identifier: 'print2',
                            options: {
                                minFontSize: 87,
                            },
                        },
                    ],
                },
            },
        };
        // in the call we provide the requested design production method identifier
        expect(getFontSizeMin(mockGlobalState, 'print')).toBe(12);
    });
    test('getElementLockState returns the value of "designElementsLocked" field from the selected design production method', () => {
        const mockGlobalState = {
            configurator: {
                configuration: {
                    // the state already contains the selected design production method
                    designdata: {
                        front: {
                            designProductionMethodIdentifier: 'print3',
                        },
                    },
                },
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            designElementsLocked: false,
                        },
                        {
                            identifier: 'print2',
                            designElementsLocked: true,
                        },
                        {
                            identifier: 'print3',
                            designElementsLocked: true,
                        },
                    ],
                },
            },
        };
        expect(getElementLockState(mockGlobalState)).toBe(true);
        expect(getElementLockState(mockGlobalState, 'print')).toBe(false);
        expect(getElementLockState(mockGlobalState, 'print2')).toBe(true);
    });
    test('getCameraViewListForDesignAreaList returns the correct list of views', () => {
        expect(
            getCameraViewListForDesignAreaList(
                [
                    {
                        identifier: 'front',
                        customData: {
                            selectedCameraView: 'c1',
                        },
                    },
                    {
                        identifier: 'duplicate_test',
                        customData: {
                            selectedCameraView: 'c1',
                        },
                    },
                    {
                        identifier: 'empty_test',
                        customData: {
                            selectedCameraView: '',
                        },
                    },
                    {
                        identifier: 'not_in_designed_list',
                        customData: {
                            selectedCameraView: 'c2',
                        },
                    },
                ],
                ['front', 'duplicate_test', 'empty_test']
            )
        ).toEqual(['default', 'c1']);
    });
    test('getSelectedDesignProductionMethodForDesignArea returns the correct design production method', () => {
        const designAreas = [
            // edge case: design area does not contain the selected design production method: 'dummy_method'
            {
                identifier: 'dummy_area',
            },
            // normal case: contains one or more methods
            {
                identifier: 'a_1',
                designProductionMethods: [
                    {
                        identifier: 'dummy_method',
                    },
                    {
                        identifier: 'pad_printing', // it identifies the design production method by this value
                    },
                ],
            },
            {
                identifier: 'a_2',
                designProductionMethods: [
                    {
                        identifier: 'dummy_method',
                    },
                ],
            },
        ];
        const globalState = {
            configurator: {
                configuration: {
                    designdata: {
                        // holds the user selected values for each design area
                        // edge case: contains a design production method that does not exist in the associated design area
                        dummy_area: {
                            designProductionMethodIdentifier: 'dummy_method',
                        },
                        // normal case: contains one of the existing design production methods
                        a_1: {
                            designProductionMethodIdentifier: 'pad_printing',
                        },
                        // edge case: the user data is missing
                        a_2: null,
                    },
                },
            },
            designArea: {
                filteredDesignAreas: designAreas,
            },
        };
        expect(getSelectedDesignProductionMethodForDesignArea(globalState, designAreas[0])).toEqual(
            undefined
        );
        expect(getSelectedDesignProductionMethodForDesignArea(globalState, designAreas[1])).toEqual({
            identifier: 'pad_printing',
        });
        expect(getSelectedDesignProductionMethodForDesignArea(globalState, designAreas[2])).toEqual({
            identifier: 'dummy_method',
        });
    });
    test('getVisualizationEffect returns the correct visualization effect', () => {
        const designAreas = [
            // edge case: design area does not contain the selected design production method: 'dummy_method'
            {
                identifier: 'dummy_area',
            },
            // normal case: contains one or more methods
            {
                identifier: 'a_1',
                designProductionMethods: [
                    {
                        identifier: 'dummy_method',
                    },
                    {
                        identifier: 'pad_printing', // it identifies the design production method by this value
                        options: {
                            visualizationEffect: 'embroidery', // it should read this value
                        },
                    },
                ],
            },
            {
                identifier: 'a_2',
                designProductionMethods: [
                    {
                        identifier: 'dummy_method',
                    },
                ],
            },
        ];
        const globalState = {
            configurator: {
                configuration: {
                    designdata: {
                        // holds the user selected values for each design area
                        // edge case: contains a design production method that does not exist in the associated design area
                        dummy_area: {
                            designProductionMethodIdentifier: 'dummy_method',
                        },
                        // normal case: contains one of the existing design production methods
                        a_1: {
                            designProductionMethodIdentifier: 'pad_printing',
                        },
                        // edge case: the user data is missing
                        a_2: null,
                    },
                },
            },
            designArea: {
                filteredDesignAreas: designAreas,
            },
        };
        const method0 = getSelectedDesignProductionMethodForDesignArea(globalState, designAreas[0]);
        const method1 = getSelectedDesignProductionMethodForDesignArea(globalState, designAreas[1]);
        const method2 = getSelectedDesignProductionMethodForDesignArea(globalState, designAreas[2]);
        expect(getVisualizationEffect(method0)).toEqual('print');
        expect(getVisualizationEffect(method1)).toEqual('embroidery');
        expect(getVisualizationEffect(method2)).toEqual('print');
    });
    test('isAnyDesignAreaSelected returns false if the designArea.selectedDesignArea is an empty object, otherwise true', () => {
        expect(
            isAnyDesignAreaSelected({
                designArea: {
                    selectedDesignArea: {},
                },
            })
        ).toBe(false);
        expect(
            isAnyDesignAreaSelected({
                designArea: {
                    selectedDesignArea: {
                        identifier: 'area-51',
                    },
                },
            })
        ).toBe(true);
    });

    test('getCanvasSizeFromDesignProductionMethod returns the default dpi from the client configuration', () => {
        setConf('designer.dpi', 1200);
        expect(
            getCanvasSizeFromDesignProductionMethod({
                width: 100,
                height: 100,
            })
        ).toEqual({
            width: 100,
            height: 100,
            dpi: 1200,
            isMetric: true,
        });
    });
    test('getCanvasSizeFromDesignProductionMethod returns the dpi from the design production method', () => {
        setConf('designer.dpi', 1200);
        expect(
            getCanvasSizeFromDesignProductionMethod({
                width: 100,
                height: 100,
                dpi: 72,
            })
        ).toEqual({
            width: 100,
            height: 100,
            dpi: 72,
            isMetric: true,
        });
    });
    test('getCanvasSizeFromDesignProductionMethod returns zero size in case of incomplete design production method', () => {
        expect(getCanvasSizeFromDesignProductionMethod({})).toEqual({
            width: 0,
            height: 0,
        });
    });

    test(
        'getEngravingBackgroundColor returns the correct color ' +
            'if the designProductionMethod and variantIdentifier is provided',
        () => {
            expect(
                getEngravingBackgroundColor(
                    {},
                    {
                        identifier: 'print2',
                        engravingBackgroundColors: [
                            {
                                itemIdentifier: 'S-012192103924',
                                colorHex: '#0000FF',
                            },
                            {
                                itemIdentifier: 'S-012192103927',
                                colorHex: '#00FF00',
                            },
                            {
                                itemIdentifier: 'S-012192103934',
                                colorHex: '#FF0000',
                            },
                        ],
                    },
                    'S-012192103927'
                )
            ).toEqual('#00FF00');
        }
    );

    test('getEngravingBackgroundColor returns the correct color from the current state', () => {
        const mockGlobalState = {
            configurator: {
                configuration: {
                    // the designdata contains the selected design production method
                    designdata: {
                        front: {
                            designProductionMethodIdentifier: 'print2',
                        },
                    },
                },
                selectedVariantIdentifier: 'S-012192103934',
            },
            designArea: {
                selectedDesignArea: {
                    identifier: 'front',
                    designProductionMethods: [
                        {
                            identifier: 'print',
                            options: {
                                visualizationEffect: 'engraving',
                            },
                        },
                        {
                            identifier: 'print2',
                            engravingBackgroundColors: [
                                {
                                    itemIdentifier: 'S-012192103924',
                                    colorHex: '#0000FF',
                                },
                                {
                                    itemIdentifier: 'S-012192103927',
                                    colorHex: '#00FF00',
                                },
                                {
                                    itemIdentifier: 'S-012192103934',
                                    colorHex: '#FF0000',
                                },
                            ],
                        },
                    ],
                },
            },
        };
        expect(getEngravingBackgroundColor(mockGlobalState)).toEqual('#FF0000');
    });

    test('getVisualizationEffectWithOptions returns the correct effect with options', () => {
        const designAreas = [
            {
                identifier: 'dummy_area',
            },
            {
                identifier: 'a_1',
                designProductionMethods: [
                    {
                        identifier: 'dummy_method',
                    },
                    {
                        identifier: 'engraving_method',
                        options: {
                            visualizationEffect: 'engraving',
                        },
                        engravingBackgroundColors: [
                            {
                                itemIdentifier: 'S-012192103924',
                                colorHex: '#0000FF',
                            },
                            {
                                itemIdentifier: 'S-012192103927',
                                colorHex: '#00FF00',
                            },
                            {
                                itemIdentifier: 'S-012192103934',
                                colorHex: '#FF0000',
                            },
                        ],
                    },
                ],
            },
            {
                identifier: 'a_2',
                designProductionMethods: [
                    {
                        identifier: 'engraving_method',
                    },
                ],
            },
        ];
        const globalState = {
            configurator: {
                configuration: {
                    designdata: {
                        dummy_area: {
                            designProductionMethodIdentifier: 'dummy_method',
                        },
                        a_1: {
                            designProductionMethodIdentifier: 'engraving_method',
                        },
                        a_2: null,
                    },
                },
            },
            designArea: {
                filteredDesignAreas: designAreas,
            },
        };
        expect(getVisualizationEffectWithOptions(globalState, designAreas[1], 'S-012192103927')).toEqual({
            effect: 'engraving',
            effectOptions: { fillColor: '#00FF00' },
        });
    });

    test('isActiveBulkName returns boolean value', () => {
        const state = {
            designArea: {
                filteredDesignAreas: [
                    {
                        designProductionMethods: [
                            {
                                identifier: 'screen_printing',
                                allowBulkNames: true,
                            },
                        ],
                    },
                ],
            },
        };
        expect(isActiveBulkName(state)).toEqual(true);
    });

    test('getColorsFromCanvasDataWithPalette returns the correct colors', () => {
        const noObjects = { objects: [] };

        expect(getColorsFromCanvasDataWithPalette(noObjects)).toEqual([]);

        const objects = {
            objects: [
                {
                    type: 'Text',
                    style: {
                        colors: [
                            { identifier: '{"color":"red","palette":"default"}', value: 'rgb(255, 0, 0)' },
                        ],
                    },
                },
                {
                    type: 'Image',
                    imageData: {
                        operations: {
                            vectorizeColorsMap: {
                                '#ff0000': {
                                    identifier: '{"color":"red","palette":"default"}',
                                    value: 'rgb(255, 0, 0)',
                                },
                                '#000000': {
                                    identifier: '{"color":"black","palette":"default"}',
                                    value: '#000000',
                                },
                            },
                        },
                    },
                },
            ],
        };

        expect(getColorsFromCanvasDataWithPalette(objects)).toEqual([
            { identifier: '{"color":"red","palette":"default"}', value: 'rgb(255, 0, 0)' },
            { identifier: '{"color":"black","palette":"default"}', value: 'rgb(0, 0, 0)' },
        ]);
    });

    test('createColorData returns the correct color object', () => {
        expect(createColorData('red', 'default', false, '#ff0000')).toEqual({
            identifier: '{"color":"red","palette":"default"}',
            value: '#ff0000',
        });
        expect(createColorData('ff0000', null, true, '#ff0000')).toEqual({
            identifier: '{"color":"ff0000","palette":null,"custom":true}',
            value: '#ff0000',
        });
    });

    test('parseColorData returns the correct color object', () => {
        expect(parseColorData('{"color":"red","palette":"default"}')).toEqual({
            color: 'red',
            palette: 'default',
        });
        expect(parseColorData('{"color":"ff0000","palette":null,"custom":true}')).toEqual({
            color: 'ff0000',
            palette: null,
            custom: true,
        });
        expect(parseColorData('{}')).toEqual({
            color: null,
            palette: null,
        });
        expect(parseColorData('null')).toEqual({
            color: null,
            palette: null,
        });
        expect(parseColorData('badJson')).toEqual({
            color: null,
            palette: null,
        });
    });

    test('get default design area from the flag isDefault', () => {
        const state = {
            designArea: {
                filteredDesignAreas: [
                    {
                        identifier: 'a_1',
                        designProductionMethods: [
                            {
                                identifier: 'dummy_method',
                                isDefault: true,
                            },
                            {
                                identifier: 'engraving_method',
                                isDefault: false,
                            },
                        ],
                    },
                    {
                        identifier: 'a_2',
                        designProductionMethods: [
                            {
                                identifier: 'engraving_method',
                                isDefault: false,
                            },
                        ],
                    },
                ],
            },
        };
        expect(getDefaultDesignAreaIdentifierFromProductionMethod(state)).toEqual('a_1');
    });
    test('getDefaultColorsFromDesignProductionMethod returns the correct default colors', () => {
        const productionMethod = {
            defaultColors: {
                dummyVariantIdentifier: {
                    default: 'black',
                },
            },
        };

        expect(getDefaultColorsFromDesignProductionMethod(productionMethod)).toEqual({
            dummyVariantIdentifier: { default: 'black' },
        });
        const productionMethodWithoutDefaultColors = {
            defaultColors: null,
        };

        expect(getDefaultColorsFromDesignProductionMethod(productionMethodWithoutDefaultColors)).toEqual({});
    });
    test('getDefaultTextColor returns the correct color without colorPalettes', () => {
        const state = {
            configurator: {
                configuration: {},
            },
            designArea: {
                filteredDesignAreas: [],
                selectedDesignArea: {
                    identifier: 'a_1',
                    designProductionMethods: [
                        {
                            identifier: 'pad_printing',
                            colorPalettes: [],
                        },
                    ],
                },
            },
        };

        expect(getDefaultTextColor(state)).toEqual({
            custom: true,
            identifier: 'ff0000',
            paletteIdentifier: null,
            value: '#ff0000',
        });
    });
    test('getDefaultTextColor returns the correct color with colorIndex', () => {
        const state = {
            configurator: {
                configuration: {},
            },
            designArea: {
                filteredDesignAreas: [],
                selectedDesignArea: {
                    identifier: 'a_1',
                    designProductionMethods: [
                        {
                            identifier: 'pad_printing',
                            colorPalettes: [
                                {
                                    identifier: 'default',
                                    colors: [
                                        {
                                            identifier: 'red',
                                            hex_value: 'ff0000',
                                            title: 'red',
                                        },
                                        {
                                            identifier: 'blue',
                                            hex_value: '0000ff',
                                            title: 'blue',
                                        },
                                        {
                                            identifier: 'black',
                                            hex_value: '000000',
                                            title: 'black',
                                        },
                                    ],
                                    title: 'default',
                                },
                            ],
                        },
                    ],
                },
            },
        };

        expect(getDefaultTextColor(state, 1)).toEqual({
            custom: false,
            identifier: 'blue',
            paletteIdentifier: 'default',
            value: '#0000ff',
        });

        // Index doesn't exist in colorPalettes
        expect(getDefaultTextColor(state, 5)).toEqual({
            custom: true,
            identifier: 'ff0000',
            paletteIdentifier: null,
            value: '#ff0000',
        });
    });

    test('isValidHex returns the correct value', () => {
        expect(isValidHex('#ff0000')).toEqual(true);
        expect(isValidHex('#f00')).toEqual(true);
        expect(isValidHex('dummytext')).toEqual(false);
        expect(isValidHex('rgb(0,0,0)')).toEqual(false);
    });

    test('hexToRgb returns the correct value', () => {
        expect(hexToRgb('#ff0000')).toEqual('rgb(255, 0, 0)');
        expect(hexToRgb('#ff00ff')).toEqual('rgb(255, 0, 255)');
        expect(hexToRgb('#f00')).toEqual('rgb(255, 0, 0)');
        expect(hexToRgb('#f00')).toEqual('rgb(255, 0, 0)');
        expect(hexToRgb('dummytext')).toEqual(null);
    });

    test('hexToRgb returns the correct value', () => {
        expect(rgbToHex(255, 255, 0)).toEqual('#ffff00');
        expect(() => rgbToHex(255, 256, 0)).toThrowError();
    });

    test('hexToRgbNumbers returns the correct value', () => {
        expect(hexToRgbNumbers('#ff0000')).toEqual([255, 0, 0]);
        expect(hexToRgbNumbers('#ff00ff')).toEqual([255, 0, 255]);
        expect(hexToRgbNumbers('#f00')).toEqual([255, 0, 0]);
        expect(hexToRgbNumbers('#007755')).toEqual([0, 119, 85]);
        expect(hexToRgbNumbers('dummytext')).toEqual(null);
    });

    test('calculateColorDistance returns the correct valule', () => {
        expect(calculateColorDistance('#ff0000', '#ff0000')).toEqual(0);
        expect(calculateColorDistance('#ff0000', '#ff00ff')).toEqual(65025);
        expect(calculateColorDistance('#ff0000', '#007755')).toEqual(86411);
        expect(calculateColorDistance('notAHexCode', '#007755')).toEqual(null);
        expect(calculateColorDistance('#007755', '#notAHexCode')).toEqual(null);
    });

    test('getDefaultTextColor returns the correct color without colorIndex', () => {
        const createState = (selectedVariantIdentifier, defaultColor) => {
            return {
                configurator: {
                    configuration: {},
                    selectedVariantIdentifier,
                },
                designArea: {
                    filteredDesignAreas: [],
                    selectedDesignArea: {
                        identifier: 'a_1',
                        designProductionMethods: [
                            {
                                identifier: 'pad_printing',
                                defaultColors: {
                                    dummyVariantIdentifier: {
                                        default: 'black',
                                    },
                                },
                                colorPalettes: [
                                    {
                                        identifier: 'default',
                                        colors: [
                                            {
                                                identifier: 'red',
                                                hex_value: 'ff0000',
                                                title: 'red',
                                            },
                                            {
                                                identifier: 'blue',
                                                hex_value: '0000ff',
                                                title: 'blue',
                                            },
                                            {
                                                identifier: 'black',
                                                hex_value: '000000',
                                                title: 'black',
                                            },
                                        ],
                                        title: 'default',
                                        defaultColor,
                                    },
                                ],
                            },
                        ],
                    },
                },
            };
        };

        // variant default color
        expect(getDefaultTextColor(createState('dummyVariantIdentifier', null))).toEqual({
            custom: false,
            identifier: 'black',
            paletteIdentifier: 'default',
            value: '#000000',
        });

        // no variant default color
        expect(getDefaultTextColor(createState('dummyVariantIdentifier2', null))).toEqual({
            custom: false,
            identifier: 'red',
            paletteIdentifier: 'default',
            value: '#ff0000',
        });

        // color palette default color
        expect(getDefaultTextColor(createState('dummyVariantIdentifier2', { identifier: 'blue' }))).toEqual({
            custom: false,
            identifier: 'blue',
            paletteIdentifier: 'default',
            value: '#0000ff',
        });
    });

    test('getDefaultTextColor returns the correct color when the defaultColors is null', () => {
        const createState = (selectedVariantIdentifier, defaultColor) => {
            return {
                configurator: {
                    configuration: {},
                    selectedVariantIdentifier,
                },
                designArea: {
                    filteredDesignAreas: [],
                    selectedDesignArea: {
                        identifier: 'a_1',
                        designProductionMethods: [
                            {
                                identifier: 'pad_printing',
                                defaultColors: null,
                                colorPalettes: [
                                    {
                                        identifier: 'default',
                                        colors: [
                                            {
                                                identifier: 'red',
                                                hex_value: 'ff0000',
                                                title: 'red',
                                            },
                                            {
                                                identifier: 'blue',
                                                hex_value: '0000ff',
                                                title: 'blue',
                                            },
                                            {
                                                identifier: 'black',
                                                hex_value: '000000',
                                                title: 'black',
                                            },
                                        ],
                                        title: 'default',
                                        defaultColor,
                                    },
                                ],
                            },
                        ],
                    },
                },
            };
        };
        // returns the first palette color since the default color is not defined for the variant
        expect(getDefaultTextColor(createState('dummyVariantIdentifier', null))).toEqual({
            custom: false,
            identifier: 'red',
            paletteIdentifier: 'default',
            value: '#ff0000',
        });
    });
    test('rgbStringToHex returns the correct value', () => {
        expect(rgbString2hex('rgb(255, 255, 0)')).toEqual('#ffff00');
        expect(() => rgbString2hex(255, 256, 0)).toThrowError();
    });
    test('getAvailableColorsForDesignProductionMethod returns the productionMethod colors', () => {
        const designProductionMethod = {
            identifier: 'screen_printing',
            colorPalettes: [
                {
                    defaultColor: null,
                    colors: [
                        {
                            identifier: 'red',
                            hex_value: 'ff0000',
                            title: 'red',
                        },
                        {
                            identifier: 'blue',
                            hex_value: '0000ff',
                            title: 'blue',
                        },
                        {
                            identifier: 'black',
                            hex_value: '000000',
                            title: 'black',
                        },
                    ],
                    identifier: 'default',
                    title: 'default',
                },
            ],
        };
        const colors = [
            {
                hex_value: 'ff0000',
                identifier: 'red',
                paletteIdentifier: 'default',
                title: 'red',
            },
            {
                hex_value: '0000ff',
                identifier: 'blue',
                paletteIdentifier: 'default',
                title: 'blue',
            },
            {
                hex_value: '000000',
                identifier: 'black',
                paletteIdentifier: 'default',
                title: 'black',
            },
        ];
        expect(getAvailableColorsForDesignProductionMethod(designProductionMethod)).toEqual(colors);
    });
    test('getAvailableColorsForDesignProductionMethod returns [] if the given value is not an object', () => {
        expect(getAvailableColorsForDesignProductionMethod(null)).toEqual([]);
    });
    test('getUsedColorsForDesignAreas returns the correct colors', () => {
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        front: {
                            canvasData: {
                                objects: [
                                    {
                                        type: 'Text',
                                        style: {
                                            colors: [
                                                {
                                                    identifier: '{"color":"black","palette":"default"}',
                                                    value: 'rgb(0, 0, 0)',
                                                },
                                            ],
                                        },
                                    },
                                    {
                                        type: 'Image',
                                        imageData: {
                                            operations: {
                                                vectorizeColorsMap: {
                                                    '#ff0000': {
                                                        identifier: '{"color":"red","palette":"default"}',
                                                        value: 'rgb(255, 0, 0)',
                                                    },
                                                    '#000000': {
                                                        identifier: '{"color":"black","palette":"default"}',
                                                        value: '#000000',
                                                    },
                                                },
                                            },
                                        },
                                    },
                                ],
                            },
                        },
                    },
                },
            },
        };
        const colors = [
            { hex_value: '000000', palette: 'default', identifier: 'black', value: 'rgb(0, 0, 0)' },
            { hex_value: 'ff0000', palette: 'default', identifier: 'red', value: 'rgb(255, 0, 0)' },
        ];
        expect(getUsedColorsForDesignAreas(state)).toEqual(colors);
    });

    test('hasSelectedBulkName returns boolean value', () => {
        const canvasDataState = {
            canvasData: {
                objects: [
                    {
                        isBulkName: true,
                        type: 'Text',
                    },
                ],
            },
        };
        expect(hasSelectedBulkName(canvasDataState)).toEqual(true);
    });

    test('isBulkNamesSelected returns the correct boolean value', () => {
        const configuratorState = {
            configuration: {
                designdata: {
                    front_center: {
                        canvasData: {
                            objects: [{ isBulkName: true }],
                        },
                    },
                },
            },
        };
        expect(isBulkNamesSelected(configuratorState)).toEqual(true);
    });

    test('isPlaceholderContent returns the correct result', () => {
        expect(isPlaceholderContent('<span>fake text</span>')).toEqual(false);
        expect(isPlaceholderContent('<span data-placeholder="true">fake text</span>')).toEqual(true);
    });

    test('contentHasText returns the correct result', () => {
        expect(contentHasText('')).toEqual(false);
        expect(contentHasText('<span> </span>')).toEqual(false);
        expect(contentHasText('<span><span> </span> </span>')).toEqual(false);
        expect(contentHasText('<span>fake text</span>')).toEqual(true);
    });

    test('getDesignAreaImageCompatibilityInfo returns the correct image compatibility info', () => {
        const compatibilityInfo = getDesignAreaImageCompatibilityInfo({
            identifier: 'embroidery',
            options: {
                maxColorAmount: 4,
                vectorsRequired: true,
            },
            colorPalettes: [
                {
                    identifier: 'default',
                },
            ],
        });
        expect(compatibilityInfo).toEqual({
            colorPalettes: ['default'],
            vectorsRequired: true,
            vectorizedLogoMandatory: false,
            maxColorAmount: 4,
        });
    });

    test('getCurrentCompatibilityInfoHash returns the correct image compatibility info', () => {
        const filteredDesignAreas = [
            {
                identifier: 'area_1',
                designProductionMethods: [
                    {
                        identifier: 'embroidery',
                        options: {
                            maxColorAmount: 4,
                            vectorsRequired: true,
                            vectorizedLogoMandatory: true,
                        },
                        colorPalettes: [
                            {
                                identifier: 'default',
                            },
                        ],
                    },
                ],
            },
        ];
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        area_1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                    },
                },
            },
            designArea: {
                filteredDesignAreas,
                selectedDesignArea: filteredDesignAreas[0],
            },
        };
        const compatibilityInfo = getCurrentCompatibilityInfoHash(state, 'a_1');
        expect(compatibilityInfo).toEqual({
            colorPalettes: ['default'],
            vectorsRequired: true,
            vectorizedLogoMandatory: true,
            maxColorAmount: 4,
        });
    });

    test('areHashesCompatible returns the correct result for incompatible hashes', () => {
        expect(
            areHashesCompatible(
                {
                    colorPalettes: ['palette_1'],
                    vectorsRequired: true,
                    maxColorAmount: 4,
                },
                {
                    colorPalettes: ['palette_1'],
                    vectorsRequired: true,
                    maxColorAmount: 3,
                }
            )
        ).toBe(false);
        expect(
            areHashesCompatible(
                {
                    colorPalettes: ['palette_1'],
                    vectorsRequired: true,
                    maxColorAmount: 4,
                },
                {
                    colorPalettes: ['palette_2'],
                    vectorsRequired: true,
                    maxColorAmount: 4,
                }
            )
        ).toBe(false);
        expect(
            areHashesCompatible(
                {
                    colorPalettes: ['palette_1'],
                    vectorsRequired: true,
                    maxColorAmount: 4,
                    vectorizedLogoMandatory: false,
                },
                {
                    colorPalettes: ['palette_1'],
                    vectorsRequired: true,
                    maxColorAmount: 4,
                    vectorizedLogoMandatory: true,
                }
            )
        ).toBe(false);
    });

    test('areHashesCompatible returns the correct result compatible hashes', () => {
        expect(
            areHashesCompatible(
                {
                    colorPalettes: ['palette_1'],
                    vectorsRequired: true,
                    maxColorAmount: 4,
                },
                {
                    colorPalettes: ['palette_1'],
                    vectorsRequired: false,
                    maxColorAmount: 0,
                }
            )
        ).toBe(true);
    });

    test('getVectorizedImageColor returns an empty object if userImages are empty', () => {
        const filteredDesignAreas = [
            {
                identifier: 'area_1',
                designProductionMethods: [
                    {
                        identifier: 'embroidery',
                        options: {
                            maxColorAmount: 4,
                            vectorsRequired: true,
                        },
                        colorPalettes: [
                            {
                                identifier: 'default',
                            },
                        ],
                    },
                ],
            },
        ];
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        area_1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                        area_2: {
                            designProductionMethodIdentifier: 'screen_printing',
                        },
                    },
                },
            },
            designArea: {
                filteredDesignAreas,
                selectedDesignArea: filteredDesignAreas[0],
            },
            imageGallery: {
                userImages: [],
            },
        };
        expect(getVectorizedImageColor(state)).toEqual({});
    });
    test('getVectorizedImageColor returns an empty object if the image has no color map', () => {
        const filteredDesignAreas = [
            {
                identifier: 'area_1',
                designProductionMethods: [
                    {
                        identifier: 'embroidery',
                        options: {
                            maxColorAmount: 4,
                            vectorsRequired: true,
                        },
                        colorPalettes: [
                            {
                                identifier: 'default',
                            },
                        ],
                    },
                ],
            },
        ];
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        area_1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                        area_2: {
                            designProductionMethodIdentifier: 'screen_printing',
                        },
                    },
                },
            },
            designArea: {
                filteredDesignAreas,
                selectedDesignArea: filteredDesignAreas[0],
            },
            imageGallery: {
                userImages: [
                    {
                        compatibilityInfoHash: {
                            colorPalettes: ['default'],
                            vectorsRequired: true,
                            maxColorAmount: '1',
                        },
                        operations: {
                            vectorize: true,
                            vectorizeColorsMap: [],
                        },
                    },
                ],
            },
        };
        expect(getVectorizedImageColor(state)).toEqual({});
    });
    test('getVectorizedImageColor returns the correct color if isImageCompatible is true', () => {
        const filteredDesignAreas = [
            {
                identifier: 'area_1',
                designProductionMethods: [
                    {
                        identifier: 'embroidery',
                        options: {
                            maxColorAmount: 4,
                            vectorsRequired: true,
                        },
                        colorPalettes: [
                            {
                                identifier: 'default',
                            },
                        ],
                    },
                ],
            },
        ];
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        area_1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                        area_2: {
                            designProductionMethodIdentifier: 'screen_printing',
                        },
                    },
                },
            },
            designArea: {
                filteredDesignAreas,
                selectedDesignArea: filteredDesignAreas[0],
            },
            imageGallery: {
                userImages: [
                    {
                        compatibilityInfoHash: {
                            colorPalettes: ['default'],
                            vectorsRequired: true,
                            maxColorAmount: '1',
                        },
                        operations: {
                            vectorize: true,
                            vectorizeColorsMap: [
                                {
                                    identifier: '{"color":"red","palette":"default"}',
                                    value: 'rgb(255, 0, 0)',
                                },
                                {
                                    identifier: '{"color":"yellow","palette":"default"}',
                                    value: 'rgb(255, 255, 0)',
                                },
                            ],
                        },
                    },
                ],
            },
        };
        expect(getVectorizedImageColor(state)).toEqual({
            identifier: '{"color":"red","palette":"default"}',
            value: 'rgb(255, 0, 0)',
        });
    });
    test('getVectorizedImageColor returns the correct object if there are multiple images', () => {
        const filteredDesignAreas = [
            {
                identifier: 'area_1',
                designProductionMethods: [
                    {
                        identifier: 'embroidery',
                        options: {
                            maxColorAmount: 4,
                            vectorsRequired: true,
                        },
                        colorPalettes: [
                            {
                                identifier: 'default',
                            },
                        ],
                    },
                ],
            },
        ];
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        area_1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                        area_2: {
                            designProductionMethodIdentifier: 'screen_printing',
                        },
                    },
                },
            },
            designArea: {
                filteredDesignAreas,
                selectedDesignArea: filteredDesignAreas[0],
            },
            imageGallery: {
                userImages: [
                    {
                        compatibilityInfoHash: {
                            colorPalettes: ['default'],
                            vectorsRequired: true,
                            maxColorAmount: '1',
                        },
                        operations: {
                            vectorize: true,
                            vectorizeColorsMap: [
                                {
                                    identifier: '{"color":"red","palette":"default"}',
                                    value: 'rgb(255, 0, 0)',
                                },
                                {
                                    identifier: '{"color":"yellow","palette":"default"}',
                                    value: 'rgb(255, 255, 0)',
                                },
                            ],
                        },
                    },
                    {
                        compatibilityInfoHash: {
                            colorPalettes: ['default'],
                            vectorsRequired: true,
                            maxColorAmount: '1',
                        },
                        operations: {
                            vectorize: true,
                            vectorizeColorsMap: [
                                {
                                    identifier: '{"color":"black","palette":"default"}',
                                    value: 'rgb(0, 0, 0)',
                                },
                                {
                                    identifier: '{"color":"white","palette":"default"}',
                                    value: 'rgb(255, 255, 255)',
                                },
                            ],
                        },
                    },
                ],
            },
        };
        expect(getVectorizedImageColor(state)).toEqual({
            identifier: '{"color":"black","palette":"default"}',
            value: 'rgb(0, 0, 0)',
        });
    });
    test('getVectorizedImageColor returns a replaced color object if the isImageCompatible function returns false', () => {
        const filteredDesignAreas = [
            {
                identifier: 'area_1',
                designProductionMethods: [
                    {
                        identifier: 'embroidery',
                        options: {
                            maxColorAmount: 4,
                            vectorsRequired: true,
                        },
                        colorPalettes: [
                            {
                                identifier: 'hks',
                                colors: [
                                    {
                                        identifier: 'hks_1',
                                        hex_value: 'ffe263',
                                        title: 'HKS 1',
                                    },
                                    {
                                        identifier: 'hks_14',
                                        hex_value: 'e2382a',
                                        title: 'HKS 14',
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
        ];
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        area_1: {
                            designProductionMethodIdentifier: 'embroidery',
                        },
                        area_2: {
                            designProductionMethodIdentifier: 'screen_printing',
                        },
                    },
                },
            },
            designArea: {
                filteredDesignAreas,
                selectedDesignArea: filteredDesignAreas[0],
            },
            imageGallery: {
                userImages: [
                    {
                        compatibilityInfoHash: {
                            colorPalettes: ['default'],
                            vectorsRequired: true,
                            maxColorAmount: '1',
                        },
                        operations: {
                            vectorize: true,
                            vectorizeColorsMap: [
                                {
                                    identifier: '{"color":"black","palette":"default"}',
                                    value: 'rgb(0, 0, 0)',
                                },
                                {
                                    identifier: '{"color":"white","palette":"default"}',
                                    value: 'rgb(255, 255, 255)',
                                },
                            ],
                        },
                    },
                    {
                        compatibilityInfoHash: {
                            colorPalettes: ['default', 'HKS'],
                            vectorsRequired: true,
                            maxColorAmount: '5',
                        },
                        operations: {
                            vectorize: true,
                            vectorizeColorsMap: [
                                {
                                    identifier: '{"color":"red","palette":"default"}',
                                    value: 'rgb(255, 0, 0)',
                                },
                                {
                                    identifier: '{"color":"yellow","palette":"default"}',
                                    value: 'rgb(255, 255, 0)',
                                },
                            ],
                        },
                    },
                ],
            },
        };
        expect(getVectorizedImageColor(state)).toEqual({
            identifier: '{"color":"hks_14","palette":"hks"}',
            value: '#e2382a',
        });
    });
    test('areAllDesignAreasEmpty returns true for empty designAreas', () => {
        const state = {
            configurator: {
                configuration: {
                    designdata: {
                        front: { canvasData: { objects: [], size: {} } },
                    },
                },
            },
        };
        expect(areAllDesignAreasEmpty(state)).toEqual(true);
    });
    test('areAllDesignAreasEmpty returns false if canvas data is not null', () => {
        const state = {
            configuration: {
                designdata: {
                    front: { canvasData: { objects: [], size: {} } },
                },
            },
        };
        expect(areAllDesignAreasEmpty(state)).toEqual(false);
    });
    test('hasLastEditedDesignArea returns false if LastEditedDesignArea is empty', () => {
        const state = {
            lastSelectedDesignAreaIdentifier: {},
        };
        expect(hasLastEditedDesignArea(state)).toBe(false);
    });
    test('hasLastEditedDesignArea returns true if LastEditedDesignArea is not empty', () => {
        const state = {
            lastSelectedDesignAreaIdentifier: 'rear',
        };
        expect(hasLastEditedDesignArea(state)).toBe(true);
    });

    test('getDesignAreaColorAmount returns the correct amount', () => {
        const amount1 = getDesignAreaColorAmount(2, 0);

        expect(amount1).toEqual(1);

        const amount2 = getDesignAreaColorAmount(0, 0);

        expect(amount2).toEqual(null);

        const amount3 = getDesignAreaColorAmount(2, 1);

        expect(amount3).toEqual(1);

        const amount4 = getDesignAreaColorAmount(2, 3);

        expect(amount4).toEqual(2);
    });

    test('getDesignAreaPreSelection returns the correct design area', () => {
        const mockPreSelection = {
            designAreas: [{ identifier: 'front' }],
        };

        setConf('designerPreSelection', mockPreSelection);

        const area = getDesignAreaPreSelection('front');

        expect(area).toEqual({ identifier: 'front' });

        const missingArea = getDesignAreaPreSelection('front2');

        expect(missingArea).toEqual({});
    });

    test('designProductionMethodHasEmbroideryVisualizationEffect returns true', () => {
        expect(
            designProductionMethodHasEmbroideryVisualizationEffect({
                options: {
                    visualizationEffect: 'embroidery',
                },
            })
        ).toBe(true);
    });

    test('designProductionMethodHasEmbroideryVisualizationEffect returns false', () => {
        expect(
            designProductionMethodHasEmbroideryVisualizationEffect({
                options: {
                    visualizationEffect: 'print',
                },
            })
        ).toBe(false);
    });
});
