import { __decorate, __extends } from "tslib";
import * as React from 'react';
import { render } from '@testing-library/react';
import { customizable } from './customizable';
import { Customizations } from './Customizations';
import { Customizer } from './Customizer';
var ConcatStyles = /** @class */ (function (_super) {
    __extends(ConcatStyles, _super);
    function ConcatStyles() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ConcatStyles.prototype.render = function () {
        return (React.createElement("div", { "data-testid": "concat-styles", 
            // @ts-expect-error - for testing purposes
            style: this.props.styles, "data-style": JSON.stringify(this.props.styles.root) }));
    };
    ConcatStyles = __decorate([
        customizable('ConcatStyles', ['styles'], true)
    ], ConcatStyles);
    return ConcatStyles;
}(React.Component));
var OverrideStyles = /** @class */ (function (_super) {
    __extends(OverrideStyles, _super);
    function OverrideStyles() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OverrideStyles.prototype.render = function () {
        return (React.createElement("div", { "data-testid": "override-styles", 
            // @ts-expect-error - for testing purposes
            style: this.props.styles, "data-style": JSON.stringify(this.props.styles.root) }));
    };
    OverrideStyles = __decorate([
        customizable('OverrideStyles', ['styles'])
    ], OverrideStyles);
    return OverrideStyles;
}(React.Component));
var StyleFunction = /** @class */ (function (_super) {
    __extends(StyleFunction, _super);
    function StyleFunction() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    StyleFunction.prototype.render = function () {
        var styles = this.props.styles({ styles: { root: {} } });
        return (React.createElement("div", { "data-testid": "style-function", style: styles.root, "data-style": JSON.stringify(styles.root) }));
    };
    StyleFunction = __decorate([
        customizable('StyleFunction', ['styles'])
    ], StyleFunction);
    return StyleFunction;
}(React.Component));
describe('customizable', function () {
    beforeEach(function () {
        Customizations.reset();
    });
    it('can concatenate global styles and component styles', function () {
        var globalStyles = { color: 'red', background: 'red' };
        var componentStyles = { color: 'blue' };
        Customizations.applySettings({ styles: { root: globalStyles } });
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: { root: componentStyles } })));
        var concatStyleRoot = rtl.getByTestId('concat-styles');
        var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
        expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual([globalStyles, componentStyles]);
    });
    it('can concatenate global styles and component styles', function () {
        var globalStyles = function (_props) {
            return { root: { color: 'red', background: 'green' } };
        };
        var componentStyles = { root: { color: 'blue' } };
        Customizations.applySettings({ styles: globalStyles });
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var concatStyleRoot = rtl.getByTestId('concat-styles');
        var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
        expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual([globalStyles({}).root, componentStyles.root]);
    });
    it('will apply component style function when no global styles are present', function () {
        var componentStyles = { root: { color: 'rgb(255, 0, 0)', background: 'rgb(0, 128, 0)' } };
        var componentStylesFn = function (_props) {
            return componentStyles;
        };
        var wrapper = render(React.createElement(Customizer, null,
            React.createElement(StyleFunction, { styles: componentStylesFn })));
        var component = wrapper.getByTestId('style-function');
        var rootStyles = JSON.parse(component.getAttribute('data-style'));
        expect(component).toHaveStyle(componentStyles.root);
        expect(rootStyles).toEqual(componentStyles.root);
    });
    it('can concatenate scoped styles and component styles', function () {
        var scopedStyles = { color: 'green', background: 'green' };
        var componentStyles = { color: 'blue' };
        Customizations.applyScopedSettings('ConcatStyles', { styles: { root: scopedStyles } });
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: { root: componentStyles } })));
        var concatStyleRoot = rtl.getByTestId('concat-styles');
        var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
        expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual([scopedStyles, componentStyles]);
    });
    it('can override global styles with component styles', function () {
        var globalStyles = { color: 'red', background: 'red' };
        var componentStyles = { color: 'blue' };
        Customizations.applySettings({ styles: { root: globalStyles } });
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(OverrideStyles, { styles: { root: componentStyles } })));
        var overrideStyleRoot = rtl.getByTestId('override-styles');
        var rootStyles = JSON.parse(overrideStyleRoot.getAttribute('data-style'));
        expect(Object.keys(overrideStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual(componentStyles);
    });
    it('can override scoped styles with component styles', function () {
        var scopedStyles = { color: 'green', background: 'green' };
        var componentStyles = { color: 'blue' };
        Customizations.applyScopedSettings('OverrideStyles', { styles: { root: scopedStyles } });
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(OverrideStyles, { styles: { root: componentStyles } })));
        var overrideStyleRoot = rtl.getByTestId('override-styles');
        var rootStyles = JSON.parse(overrideStyleRoot.getAttribute('data-style'));
        expect(Object.keys(overrideStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual(componentStyles);
    });
    it('should not mutate styles if no change to component and global styles', function () {
        var globalRootStyles = { color: 'red', background: 'red' };
        var componentRootStyles = { color: 'blue' };
        var componentStyles = { root: componentRootStyles };
        Customizations.applySettings({ styles: { root: globalRootStyles } });
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var overrideStyleRoot = rtl.getByTestId('concat-styles');
        var rootStyles = JSON.parse(overrideStyleRoot.getAttribute('data-style'));
        expect(Object.keys(overrideStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual([globalRootStyles, componentRootStyles]);
        rtl.rerender(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var updatedOverrideStyleRoot = rtl.getByTestId('concat-styles');
        var updatedRootStyles = JSON.parse(updatedOverrideStyleRoot.getAttribute('data-style'));
        expect(updatedRootStyles).toStrictEqual(rootStyles);
        expect(updatedRootStyles).toEqual(rootStyles);
    });
    it('should not mutate styles if no change to component styles without global styles', function () {
        var componentStyles = { root: { color: 'blue' } };
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var concatStyleRoot = rtl.getByTestId('concat-styles');
        var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
        expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual(componentStyles.root);
        rtl.rerender(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var updatedConcatStyleRoot = rtl.getByTestId('concat-styles');
        var updatedRootStyles = JSON.parse(updatedConcatStyleRoot.getAttribute('data-style'));
        expect(updatedRootStyles).toStrictEqual(rootStyles);
        expect(updatedRootStyles).toEqual(rootStyles);
    });
    it('should update styles if component styles changed', function () {
        var globalRootStyles = { color: 'red', background: 'red' };
        var componentRootStyles = { color: 'blue' };
        var componentStyles = { root: componentRootStyles };
        Customizations.applySettings({ styles: { root: globalRootStyles } });
        var rtl = render(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: componentStyles })));
        var concatStyleRoot = rtl.getByTestId('concat-styles');
        var rootStyles = JSON.parse(concatStyleRoot.getAttribute('data-style'));
        expect(Object.keys(concatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(rootStyles).toEqual([globalRootStyles, componentRootStyles]);
        var newComponentRootStyles = { color: 'red' };
        var newComponentStyles = { root: newComponentRootStyles };
        rtl.rerender(React.createElement(Customizer, null,
            React.createElement(ConcatStyles, { styles: newComponentStyles })));
        var updatedConcatStyleRoot = rtl.getByTestId('concat-styles');
        var updatedRootStyles = JSON.parse(updatedConcatStyleRoot.getAttribute('data-style'));
        expect(Object.keys(updatedConcatStyleRoot.style)).toEqual(expect.arrayContaining(['root', '__shadowConfig__']));
        expect(updatedRootStyles).toEqual([globalRootStyles, newComponentRootStyles]);
    });
});
//# sourceMappingURL=customizable.test.js.map