import { cloneDeep, isEqual } from 'lodash';
// if these properties have been cleared by the user,
// set them to a value that will match the existing behavior
const WIDGET_TYPE_TO_DEFAULT_STYLES = {
    CONTAINER_WIDGET: {
        backgroundColor: 'none'
    },
    FORM_WIDGET: {
        backgroundColor: 'none'
    },
    IMAGE_WIDGET: {
        borderRadius: '0px'
    },
    CANVAS_WIDGET: {
        backgroundColor: 'none',
        padding: {
            top: { value: 0, mode: 'px' },
            bottom: { value: 0, mode: 'px' },
            left: { value: 0, mode: 'px' },
            right: { value: 0, mode: 'px' }
        }
    },
    GRID_WIDGET: {
        backgroundColor: 'none'
    }
};
// white -> "DEFAULT"
// '' -> none
// what components get the padding ?
//   canvas
const WHITES = new Set(['#ffffff', 'white', 'rgb(255, 255, 255)']);
const BORDER_RADII = new Set(['4px']);
// if these properties have not been set by the user, clear them so that
// they will be themable
const WIDGET_TYPE_TO_CLEARED_STYLES = {
    CONTAINER_WIDGET: {
        backgroundColor: WHITES
    },
    FORM_WIDGET: {
        backgroundColor: WHITES
    },
    IMAGE_WIDGET: {
        borderRadius: BORDER_RADII
    },
    CANVAS_WIDGET: {
        padding: {
            top: { value: 12, mode: 'px' },
            bottom: { value: 12, mode: 'px' },
            right: { value: 16, mode: 'px' },
            left: { value: 16, mode: 'px' }
        }
    },
    GRID_WIDGET: {
        backgroundColor: WHITES
    }
};
const adjustStyles = (oldWidget) => {
    // Don't clone children for performance reasons
    const { children: oldChildren, ..._widget } = Object.freeze(oldWidget);
    const newWidget = cloneDeep(_widget);
    if (WIDGET_TYPE_TO_DEFAULT_STYLES[newWidget.type]) {
        Object.keys(WIDGET_TYPE_TO_DEFAULT_STYLES[newWidget.type]).forEach((key) => {
            if (!newWidget[key]) {
                newWidget[key] = WIDGET_TYPE_TO_DEFAULT_STYLES[newWidget.type][key];
            }
        });
    }
    // clear out styles that have not been set by the user
    if (WIDGET_TYPE_TO_CLEARED_STYLES[newWidget.type]) {
        Object.keys(WIDGET_TYPE_TO_CLEARED_STYLES[newWidget.type]).forEach((key) => {
            if (typeof newWidget[key] === 'string' &&
                WIDGET_TYPE_TO_CLEARED_STYLES[newWidget.type][key].has(newWidget[key].toLowerCase())) {
                newWidget[key] = undefined;
            }
            else if (isEqual(newWidget[key], WIDGET_TYPE_TO_CLEARED_STYLES[newWidget.type][key])) {
                newWidget[key] = undefined;
            }
        });
    }
    // recurse over children
    if (oldChildren) {
        newWidget.children = oldChildren.map((child) => adjustStyles(child));
    }
    return newWidget;
};
export const migrate7to8 = (dsl) => {
    const updatedDsl = adjustStyles(dsl);
    updatedDsl.version = 8;
    return updatedDsl;
};
//# sourceMappingURL=v7to8.js.map