import React from 'react';
import mountWithState from 'Utils/Test/mountWithState';
import Designer from 'App/Modules/Designer/Containers/Designer';
import ServiceLocator from 'App/ServiceLocator';

jest.mock('App/Modules/Designer/DesignerUI', () => {
    const DefaultDesigner = () => <div />;

    return {
        __esModule: true, // this property makes it work
        DefaultDesigner,
    };
});

const designArea = {
    identifier: 'front',
    sequenceNumber: '10',
    title: 'Vorne',
    baseShape: {},
    position: {},
    designProductionMethods: [
        {
            identifier: 'print',
            title: 'Druck',
            height: 15,
            width: 10,
            options: { minFontSize: 5 },
            colorPalettes: [],
            customData: 'null',
        },
    ],
    customData: {},
};

const filteredDesignAreas = [
    {
        ...designArea,
        designView: {
            identifier: '1',
            title: 'Erste Ansicht',
            sequenceNumber: '10',
            designAreas: [designArea],
        },
    },
];

const mockState2D = {
    configurator: {
        configuration: {
            item: {
                settings: {
                    visualizationCreator: '2d',
                    visualizationDesigner: '2d',
                },
            },
            designdata: {
                front: {
                    canvasData: {
                        objects: [{ type: 'Text' }],
                    },
                },
                back: null,
            },
        },
        client: {
            theme: {
                highlightColor: '#112233',
            },
        },
    },
    configurationMode: {
        selectedMode: 'designer',
    },
    designArea: {
        filteredDesignAreas,
        selectedDesignArea: filteredDesignAreas[0],
    },
};

const mockState3D = {
    configurator: {
        configuration: {
            item: {
                settings: {
                    visualizationCreator: '3d',
                    visualizationDesigner: '3d',
                },
            },
            designdata: {
                front: {
                    canvasData: {
                        objects: [{ type: 'Text' }],
                    },
                },
                back: null,
            },
        },
        client: {
            theme: {
                highlightColor: '#112233',
            },
        },
    },
    configurationMode: {
        selectedMode: 'designer',
    },
    designArea: {
        filteredDesignAreas,
        selectedDesignArea: filteredDesignAreas[0],
    },
};

describe('Screens/Configurator/Containers/Designer', () => {
    test('The Designer container provides the correct state values to the connected component in 2D mode', () => {
        const { wrapper } = mountWithState(Designer, mockState2D);
        const props = wrapper.find('DefaultDesigner').props();
        expect(props.canvasSize).toEqual({ width: 10, height: 15, isMetric: true, dpi: 300 });
        expect(props.show).toEqual(true);
        expect(props.selectedColor).toEqual('#112233');
        expect(props.hasBorder).toEqual(true);

        // The hide functionality should be available only in 3D mode.
        // In the state above the configurationMode is 'designer', and the associated visualization setting is '2d',
        // so the hide functionality is not available
        expect(props.hideDesigner).toBeFalsy();
    });
    test('The Designer container provides the correct hideDesigner function to the connected component in 3D mode', () => {
        const mockUISrv = new (class UIService {
            static serviceName = 'UIService';
            hide = jest.fn();
        })();
        ServiceLocator.provide(mockUISrv);

        const mockDesignDataSrv = new (class DesignDataService {
            static serviceName = 'DesignDataService';
            closeDesignAreaEditor = jest.fn();
        })();
        ServiceLocator.provide(mockDesignDataSrv);

        const { wrapper } = mountWithState(Designer, mockState3D);
        const props = wrapper.find('DefaultDesigner').props();

        // The hide functionality should be available only in 3D mode.
        // In the state above the configurationMode is 'designer', and the associated visualization setting is '3d',
        // so the hide functionality should be available
        expect(typeof props.hideDesigner).toBe('function');

        // Check if the hideDesigner function calls the hide action with the string 'designer'
        props.hideDesigner();
        expect(mockDesignDataSrv.closeDesignAreaEditor).toHaveBeenCalled();
    });
    test('The Designer container provides hasBorder = false if the design area has mask', () => {
        const mockState2DWithMask = {
            ...mockState2D,
            designArea: {
                filteredDesignAreas,
                selectedDesignArea: {
                    ...filteredDesignAreas[0],
                    mask: {
                        maskType: 'circle',
                    },
                },
            },
        };
        const { wrapper } = mountWithState(Designer, mockState2DWithMask);
        const props = wrapper.find('DefaultDesigner').props();
        expect(props.hasBorder).toEqual(false);
    });
});
