import DesignerService from '../DesignerService';
import ServiceLocator from '../../ServiceLocator';
import { SET_SELECTED_IMAGE } from '../../Reducers/ImageGallery/Actions';
import DesignDataService from '../DesignDataService';

describe('Services/DesignerService', () => {
    it('openImageEditDialog selects the edited image and loads the tags and gallery images', async () => {
        let storeSrvc = new (class StoreService {
            static serviceName = 'StoreService';
            state = {
                imageGallery: {
                    userImages: [{ identifier: 'id_1' }, { identifier: 'id_2' }, { identifier: 'id_3' }],
                    tags: [],
                    gallery: [],
                },
            };
            dispatch = jest.fn();
        })();
        ServiceLocator.provide(storeSrvc);
        ServiceLocator.provide(
            new (class UIService {
                static serviceName = 'UIService';
                show = jest.fn();
            })()
        );

        const srvc = new DesignerService();
        srvc.loadTags = jest.fn();
        srvc.loadImages = jest.fn();
        await srvc.openImageEditDialog('id_2');
        expect(storeSrvc.dispatch).toHaveBeenCalledWith({
            type: SET_SELECTED_IMAGE,
            identifier: 'id_2',
        });
        expect(srvc.loadTags).toHaveBeenCalled();
        expect(srvc.loadImages).toHaveBeenCalled();
    });

    describe('imageEditDialogContinueClickHandler', () => {
        it('throws an error if we are in edit mode but there is no active canvas object or placeholderImageUpdate is false', async () => {
            const storeService = new (class StoreService {
                static serviceName = 'StoreService';
                state = {
                    imageGallery: {
                        tags: [],
                        gallery: [],
                        selectedImage: {
                            operations: {},
                            preview: '',
                        },
                        mode: 'edit',
                    },
                };
                dispatch = jest.fn();
            })();
            ServiceLocator.provide(storeService);

            const desinDataService = new DesignDataService();
            desinDataService.editFile = jest.fn();
            ServiceLocator.provide(desinDataService);

            ServiceLocator.provide(
                new (class UIService {
                    static serviceName = 'UIService';
                    show = jest.fn();
                    hide = jest.fn();
                })()
            );

            const service = new DesignerService();
            service.loadTags = jest.fn();
            service.loadImages = jest.fn();
            service.addImageFromUrl = jest.fn();

            await service.openImageEditDialog('id_1', {});

            expect(service.imageEditDialogContinueClickHandler()).rejects.toEqual(
                new Error(
                    'imageEditDialogContinueClickHandler must be called in edit mode while either there is an active canvas object or placeholderImageUpdate is true'
                )
            );
        });
    });

    test('createColorizedTextContent creates the correct text with the default font and color', () => {
        const designArea = {
            identifier: 'rear_center',
            title: 'Rückseite Mitte',
            designProductionMethods: [
                {
                    identifier: 'screen_printing',
                    title: 'Siebdruck',
                    isDefault: true,
                    colorPalettes: [
                        {
                            identifier: 'default',
                            title: 'Standardfarben',
                            defaultColor: {
                                identifier: 'red',
                            },
                            colors: [
                                { identifier: 'white', hex_value: 'ffffff', title: 'weiß' },
                                { identifier: 'red', hex_value: 'f73429', title: 'rot' },
                                { identifier: 'blue', hex_value: '0078b8', title: 'blau' },
                            ],
                        },
                    ],
                },
            ],
        };
        const storeService = new (class StoreService {
            static serviceName = 'StoreService';
            state = {
                fonts: [
                    {
                        name: 'Bree',
                        family: 'Bree',
                        regular: true,
                        bold: false,
                        italic: false,
                        boldItalic: false,
                        isDefault: false,
                        urlRegular: '/designer/fonts/Bree_Serif-regular.ttf',
                    },
                    {
                        name: 'Lobster',
                        family: 'Lobster',
                        regular: true,
                        bold: false,
                        italic: false,
                        boldItalic: false,
                        isDefault: true,
                        urlRegular: '/designer/fonts/Lobster-regular.ttf',
                    },
                    {
                        name: 'Luckiest',
                        family: 'Luckiest',
                        regular: true,
                        bold: false,
                        italic: false,
                        boldItalic: false,
                        isDefault: false,
                        urlRegular: '/designer/fonts/Luckiest_Guy-regular.ttf',
                    },
                ],
                designArea: {
                    selectedDesignArea: designArea,
                    filteredDesignAreas: [designArea],
                },
                configurator: {
                    configuration: {
                        designdata: {
                            rear_center: {
                                designProductionMethodIdentifier: 'screen_printing',
                            },
                        },
                    },
                },
            };
            dispatch = jest.fn();
        })();
        ServiceLocator.provide(storeService);

        const desinDataService = new DesignDataService();
        ServiceLocator.provide(desinDataService);

        const service = new DesignerService();
        const text = service.createColorizedTextContent('sample text to be replaced');
        expect(text).toMatchInlineSnapshot(
            `"<span data-placeholder=\\"true\\"><span style='color: #f73429; font-family: \\"Lobster\\"; font-weight: normal; font-style: normal;' data-color='{\\"color\\":\\"red\\",\\"palette\\":\\"default\\"}'>sample text to be replaced</span></span>"`
        );
    });
});
