import { cloneDeep, get, omit } from 'lodash';
import { describe, it, expect } from 'vitest';
import canvases from '../../utils/pageFixtures/v7/canvases.js';
import gridsAndForms from '../../utils/pageFixtures/v7/grids_and_forms.js';
import images from '../../utils/pageFixtures/v7/images.js';
import initialAppV7DSL from '../../utils/pageFixtures/v7/initial_app.js';
import nestedContainers from '../../utils/pageFixtures/v7/nested_containers.js';
import { migrate7to8 } from './v7to8.js';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getWidgetNameToProperty = (widget, widgetTypes, propertyNames, obj) => {
    if (widgetTypes.includes(widget.type)) {
        propertyNames.forEach((propertyName) => {
            obj[widget.widgetName] = {
                ...obj[widget.widgetName],
                [propertyName]: widget[propertyName]
            };
        });
    }
    if (widget.children) {
        widget.children.forEach((child) => getWidgetNameToProperty(child, widgetTypes, propertyNames, obj));
    }
};
const defaultPadding = {
    bottom: {
        mode: 'px',
        value: 12
    },
    left: {
        mode: 'px',
        value: 16
    },
    right: {
        mode: 'px',
        value: 16
    },
    top: {
        mode: 'px',
        value: 12
    }
};
describe('version 7 to version 8', () => {
    it(`returns a new object`, () => {
        const originalInput = cloneDeep(initialAppV7DSL);
        const migrated = migrate7to8(originalInput);
        expect(migrated).not.toStrictEqual(originalInput);
    });
    it('should migrate an initial app DSL', () => {
        const migrated = migrate7to8(cloneDeep(initialAppV7DSL));
        // app will be the mosty same, apart from the root containers padding + the version
        const migratedVersion = get(migrated, 'version');
        const initialVersion = get(initialAppV7DSL, 'version');
        expect(migratedVersion).toEqual(8);
        expect(initialVersion).toEqual(7);
        const migratedPadding = get(migrated, 'children[0].children[0].padding');
        const initialPadding = get(initialAppV7DSL, 'children[0].children[0].padding');
        expect(migratedPadding).toBeUndefined();
        expect(initialPadding).toEqual(defaultPadding);
        const restOfMigratedDsl = omit(migrated, ['version', 'children[0].children[0].padding']);
        const restOfInitialDsl = omit(initialAppV7DSL, ['version', 'children[0].children[0].padding']);
        expect(restOfMigratedDsl).toEqual(restOfInitialDsl);
    });
    it('should migrate container widgets background color styles', () => {
        const initialBackgrounds = {};
        const migratedBackgrounds = {};
        getWidgetNameToProperty(nestedContainers, ['CONTAINER_WIDGET', 'CANVAS_WIDGET'], ['backgroundColor'], initialBackgrounds);
        const migrated = migrate7to8(cloneDeep(nestedContainers));
        getWidgetNameToProperty(migrated, ['CONTAINER_WIDGET', 'CANVAS_WIDGET'], ['backgroundColor'], migratedBackgrounds);
        expect(initialBackgrounds).toEqual({
            Canvas1: { backgroundColor: 'none' },
            Container1: { backgroundColor: '#FFFFFF' },
            Canvas2: {},
            Container2: { backgroundColor: 'white' },
            Canvas3: {},
            Container3: { backgroundColor: '' },
            Canvas4: {},
            Container4: { backgroundColor: 'red' },
            Canvas5: {}
        });
        expect(migratedBackgrounds).toEqual({
            Canvas1: { backgroundColor: 'none' },
            Container1: { backgroundColor: undefined },
            Canvas2: { backgroundColor: 'none' },
            Container2: { backgroundColor: undefined },
            Canvas3: { backgroundColor: 'none' },
            Container3: { backgroundColor: 'none' },
            Canvas4: { backgroundColor: 'none' },
            Container4: { backgroundColor: 'red' },
            Canvas5: { backgroundColor: 'none' }
        });
    });
    it('should migrate grid and form widgets background color styles', () => {
        const initialBackgrounds = {};
        const migratedBackgrounds = {};
        getWidgetNameToProperty(gridsAndForms, ['CONTAINER_WIDGET', 'CANVAS_WIDGET', 'FORM_WIDGET', 'IMAGE_WIDGET'], ['backgroundColor'], initialBackgrounds);
        const migrated = migrate7to8(cloneDeep(gridsAndForms));
        getWidgetNameToProperty(migrated, ['CONTAINER_WIDGET', 'CANVAS_WIDGET', 'FORM_WIDGET', 'IMAGE_WIDGET'], ['backgroundColor'], migratedBackgrounds);
        expect(initialBackgrounds).toEqual({
            Canvas1: { backgroundColor: 'none' },
            Form3: { backgroundColor: '' },
            Canvas6: {},
            Canvas2: {},
            Container1: { backgroundColor: 'white' },
            Canvas3: {},
            Image1: {},
            Form1: { backgroundColor: 'white' },
            Canvas4: {},
            Form2: { backgroundColor: 'black' },
            Canvas5: {}
        });
        expect(migratedBackgrounds).toEqual({
            Canvas1: { backgroundColor: 'none' },
            Form3: { backgroundColor: 'none' },
            Canvas6: { backgroundColor: 'none' },
            Canvas2: { backgroundColor: 'none' },
            Container1: { backgroundColor: undefined },
            Canvas3: { backgroundColor: 'none' },
            Image1: {},
            Form1: { backgroundColor: undefined },
            Canvas4: { backgroundColor: 'none' },
            Form2: { backgroundColor: 'black' },
            Canvas5: { backgroundColor: 'none' }
        });
    });
    it('should migrate image border radii', () => {
        const initialBorderRadii = {};
        const migratedBorderRadii = {};
        getWidgetNameToProperty(images, ['IMAGE_WIDGET'], ['borderRadius'], initialBorderRadii);
        const migrated = migrate7to8(cloneDeep(images));
        getWidgetNameToProperty(migrated, ['IMAGE_WIDGET'], ['borderRadius'], migratedBorderRadii);
        expect(initialBorderRadii).toEqual({ Image3: { borderRadius: '' }, Image2: { borderRadius: '0px' }, Image1: { borderRadius: '4px' } });
        expect(migratedBorderRadii).toEqual({
            Image3: { borderRadius: '0px' },
            Image2: { borderRadius: '0px' },
            Image1: { borderRadius: undefined }
        });
    });
    it('should migrate padding property', () => {
        const initialPaddings = {};
        const migratedPaddings = {};
        getWidgetNameToProperty(canvases, ['CANVAS_WIDGET'], ['padding'], initialPaddings);
        const migrated = migrate7to8(cloneDeep(canvases));
        getWidgetNameToProperty(migrated, ['CANVAS_WIDGET'], ['padding'], migratedPaddings);
        expect(initialPaddings).toEqual({
            Canvas1: {
                padding: defaultPadding
            },
            Canvas10: {
                padding: undefined
            },
            Canvas2: {
                padding: defaultPadding
            },
            Canvas3: {
                padding: defaultPadding
            },
            Canvas4: {
                padding: defaultPadding
            },
            Canvas8: {
                padding: defaultPadding
            },
            Canvas9: {
                padding: {
                    top: {
                        value: 24,
                        mode: 'px'
                    },
                    bottom: {
                        value: 12,
                        mode: 'px'
                    },
                    left: {
                        value: 16,
                        mode: 'px'
                    },
                    right: {
                        value: 16,
                        mode: 'px'
                    }
                }
            }
        });
        expect(migratedPaddings).toEqual({
            Canvas1: {
                padding: undefined
            },
            Canvas10: {
                padding: {
                    bottom: {
                        mode: 'px',
                        value: 0
                    },
                    left: {
                        mode: 'px',
                        value: 0
                    },
                    right: {
                        mode: 'px',
                        value: 0
                    },
                    top: {
                        mode: 'px',
                        value: 0
                    }
                }
            },
            Canvas2: {
                padding: undefined
            },
            Canvas3: {
                padding: undefined
            },
            Canvas4: {
                padding: undefined
            },
            Canvas8: {
                padding: undefined
            },
            Canvas9: {
                padding: {
                    top: {
                        value: 24,
                        mode: 'px'
                    },
                    bottom: {
                        value: 12,
                        mode: 'px'
                    },
                    left: {
                        value: 16,
                        mode: 'px'
                    },
                    right: {
                        value: 16,
                        mode: 'px'
                    }
                }
            }
        });
    });
});
//# sourceMappingURL=v7to8.test.js.map