import { expandVectorizeColorsMap, getClosestColorFromMap } from '../ImageEditUtils';

describe('Modules/Designer/Utils/ImageEditUtils.expandVectorizeColorsMap', () => {
    const colorPalettes = [
        {
            identifier: 'default',
            title: 'Standardfarben',
            colors: [
                {
                    identifier: 'black',
                    hex_value: '000000',
                    title: 'schwarz',
                },
                { identifier: 'white', hex_value: 'ffffff', title: 'wei\u00df' },
                {
                    identifier: 'yellow',
                    hex_value: 'ffb800',
                    title: 'gelb',
                },
                { identifier: 'red', hex_value: 'f73429', title: 'rot' },
                {
                    identifier: 'blue',
                    hex_value: '0078b8',
                    title: 'blau',
                },
                { identifier: 'pink', hex_value: 'ca0f86', title: 'rosa' },
                {
                    identifier: 'green',
                    hex_value: '007755',
                    title: 'gr\u00fcn',
                },
                { identifier: 'brown', hex_value: '7e4531', title: 'braun' },
                {
                    identifier: 'gold',
                    hex_value: '917b4c',
                    title: 'gold',
                },
                { identifier: 'silver', hex_value: '84888b', title: 'silber' },
            ],
        },
    ];

    it('returns one more color from the color palettes if the requiredColors is 2', () => {
        // we have to keys that are mapped to the same red color initially (treated as "aggregated")
        const vectorizeColorsMap = {
            '#ff0000': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
            '#ff2020': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
            '#ff1010': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
        };

        const expandedColorsMap = expandVectorizeColorsMap(vectorizeColorsMap, colorPalettes, 2);
        expect(expandedColorsMap).toEqual({
            '#ff0000': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
            '#ff2020': {
                identifier: '{"color":"pink","palette":"default"}',
                value: '#ca0f86', // replaced with the closest available color (pink)
            },
            '#ff1010': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000', // untouched, since we needed only one extra color
            },
        });
    });

    it('returns two new colors from the color palettes if the requiredColors is 3', () => {
        // we have to keys that are mapped to the same red color initially (treated as "aggregated")
        const vectorizeColorsMap = {
            '#ff0000': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
            '#ff2020': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
            '#ff1010': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
        };
        const expandedColorsMap = expandVectorizeColorsMap(vectorizeColorsMap, colorPalettes, 3);
        expect(expandedColorsMap).toEqual({
            '#ff0000': {
                identifier: '{"color":"red","palette":"default"}',
                value: '#ff0000',
            },
            '#ff2020': {
                identifier: '{"color":"pink","palette":"default"}',
                value: '#ca0f86', // replaced with the closest available color (pink)
            },
            '#ff1010': {
                identifier: '{"color":"brown","palette":"default"}',
                value: '#7e4531', // replaced with the closest from the remaining colors (brown)
            },
        });
    });
});

describe('Modules/Designer/Utils/ImageEditUtils.getClosestColorFromMap', () => {
    it('returns the closest color from the given map', () => {
        const colorsMap = {
            '#32a5b9': { identifier: '{"color":"blue","palette":"default"}', value: '#0078b8' },
            '#2b8a9a': { identifier: '{"color":"blue","palette":"default"}', value: '#0078b8' },
            '#e45527': { identifier: '{"color":"hks_14","palette":"hks"}', value: '#e2382a' },
            '#f8b242': { identifier: '{"color":"hks_11","palette":"hks"}', value: '#60d8ff' },
        };
        expect(getClosestColorFromMap(colorsMap, '#0078b8')).toEqual({
            identifier: '{"color":"hks_11","palette":"hks"}',
            value: '#60d8ff',
        });
    });
});
