import { mount, render } from 'enzyme';
import ImageColorize from './index';
import React from 'react';
import { getAggregatedColors } from '../../../../Reducers/DesignData/Selectors';
import ServiceLocator from '../../../../ServiceLocator';

describe('Modules/Designer/Components/ImageColorize', () => {
    const colorPalettes = [
        {
            colors: [
                { identifier: 'black', hex_value: '000000', title: 'schwarz' },
                { identifier: 'white', hex_value: 'ffffff', title: 'weiß' },
                { 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ün' },
                { identifier: 'brown', hex_value: '7e4531', title: 'braun' },
                { identifier: 'gold', hex_value: '917b4c', title: 'gold' },
                { identifier: 'silver', hex_value: '84888b', title: 'silber' },
            ],
            identifier: 'default',
            title: 'Standardfarben',
        },
    ];
    const vectorizeColorsMap = {
        '#fbc01f': {
            identifier: '{"color":"yellow","palette":"default"}',
            value: '#ffb800',
            isUserColor: true,
        },
        '#ffffff': { identifier: '{"color":"white","palette":"default"}', value: '#ffffff' },
    };

    const usedColors = [
        { identifier: 'yellow', hex_value: 'ffb800', title: 'gelb' },
        { identifier: 'white', hex_value: 'ffffff', title: 'weiß' },
    ];

    const aggregatedColors = getAggregatedColors(vectorizeColorsMap);

    const maxColorAmount = 4;

    const colorAmountList = Array(maxColorAmount)
        .fill(null)
        .map((_, i) => i + 1);

    test('color tiles are rendered correctly', () => {
        const tree = render(
            <ImageColorize
                colorPalettes={colorPalettes}
                vectorizeThreshold={3}
                vectorizeMonochrome={false}
                vectorizeColorsMap={vectorizeColorsMap}
                maxColorAmount={maxColorAmount}
                colorAmount={2}
                aggregatedColors={aggregatedColors}
                vectorize={true}
                imageColorsWereEdited={true}
                vectorsRequired={true}
                colorAmountList={colorAmountList}
            />
        );
        expect(tree).toMatchSnapshot();
    });

    test(
        'clicking on color tile opens up the color picker dialog, ' +
            'clicking on a color calls the onColorSelectClick function',
        () => {
            const analyticsSrvc = new (class {
                static serviceName = 'AnalyticsService';
                triggerEvent = jest.fn();
            })();
            ServiceLocator.provide(analyticsSrvc);

            const colorSelectSpy = jest.fn();
            const wrapper = mount(
                <ImageColorize
                    colorPalettes={colorPalettes}
                    vectorizeThreshold={3}
                    vectorizeMonochrome={false}
                    vectorizeColorsMap={vectorizeColorsMap}
                    maxColorAmount={maxColorAmount}
                    colorAmount={2}
                    aggregatedColors={aggregatedColors}
                    vectorize={true}
                    imageColorsWereEdited={true}
                    vectorsRequired={true}
                    colorAmountList={colorAmountList}
                    onColorSelectClick={colorSelectSpy}
                    usedColors={usedColors}
                />
            );
            const editYellowColorButton = wrapper.findWhere(node => {
                const style = node.prop('style');
                return style && style.background === '#ffb800';
            });
            editYellowColorButton.simulate('click');
            wrapper.update();

            const colorButtons = wrapper.find('[className^="ColorPalettes-colorWrapper"]');
            const blueButton = colorButtons.filterWhere(node => node.text() === 'Blau');
            blueButton.simulate('mousedown');
            expect(colorSelectSpy).toHaveBeenLastCalledWith('#fbc01f', {
                identifier: '{"color":"blue","palette":"default"}',
                value: '#0078b8',
            });
        }
    );

    test('clicking on color remove calls the onColorRemoveClick function', () => {
        const colorRemoveSpy = jest.fn();
        const wrapper = mount(
            <ImageColorize
                colorPalettes={colorPalettes}
                vectorizeThreshold={3}
                vectorizeMonochrome={false}
                vectorizeColorsMap={vectorizeColorsMap}
                maxColorAmount={maxColorAmount}
                colorAmount={2}
                aggregatedColors={aggregatedColors}
                vectorize={true}
                imageColorsWereEdited={true}
                vectorsRequired={true}
                colorAmountList={colorAmountList}
                onColorRemoveClick={colorRemoveSpy}
                usedColors={usedColors}
            />
        );
        const editYellowColorButton = wrapper.findWhere(node => {
            const style = node.prop('style');
            return style && style.background === '#ffb800';
        });
        const removeYellowColorButton = editYellowColorButton
            .closest('.MuiGrid-container')
            .find('ForwardRef(CloseIcon)');
        removeYellowColorButton.simulate('click');
        expect(colorRemoveSpy).toHaveBeenLastCalledWith('#fbc01f');
    });
});
