"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styled = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var merge_styles_1 = require("@fluentui/merge-styles");
var index_1 = require("./shadowDom/index");
var useCustomizationSettings_1 = require("./customizations/useCustomizationSettings");
var DefaultFields = ['theme', 'styles'];
function styled(Component, baseStyles, getProps, customizable, pure) {
    customizable = customizable || { scope: '', fields: undefined };
    var scope = customizable.scope, _a = customizable.fields, fields = _a === void 0 ? DefaultFields : _a;
    var Wrapped = React.forwardRef(function (props, forwardedRef) {
        var styles = React.useRef();
        var settings = (0, useCustomizationSettings_1.useCustomizationSettings)(fields, scope);
        var customizedStyles = settings.styles, dir = settings.dir, rest = tslib_1.__rest(settings, ["styles", "dir"]);
        var additionalProps = getProps ? getProps(props) : undefined;
        var useStyled = (0, index_1.useMergeStylesHooks)().useStyled;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        var cache = (styles.current && styles.current.__cachedInputs__) || [];
        var propStyles = props.styles;
        if (!styles.current || customizedStyles !== cache[1] || propStyles !== cache[2]) {
            // Using styled components as the Component arg will result in nested styling arrays.
            // The function can be cached and in order to prevent the props from being retained within it's closure
            // we pass in just the styles and not the entire props
            var concatenatedStyles = function (styleProps) {
                return (0, merge_styles_1.concatStyleSetsWithProps)(styleProps, baseStyles, customizedStyles, propStyles);
            };
            // The __cachedInputs__ array is attached to the function and consumed by the
            // classNamesFunction as a list of keys to include for memoizing classnames.
            concatenatedStyles.__cachedInputs__ = [
                baseStyles,
                customizedStyles,
                propStyles,
            ];
            concatenatedStyles.__noStyleOverride__ =
                !customizedStyles && !propStyles;
            styles.current = concatenatedStyles;
        }
        styles.current.__shadowConfig__ = useStyled(scope);
        return React.createElement(Component, tslib_1.__assign({ ref: forwardedRef }, rest, additionalProps, props, { styles: styles.current }));
    });
    // Function.prototype.name is an ES6 feature, so the cast to any is required until we're
    // able to drop IE 11 support and compile with ES6 libs
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    Wrapped.displayName = "Styled".concat(Component.displayName || Component.name);
    // This preserves backwards compatibility.
    var pureComponent = pure ? React.memo(Wrapped) : Wrapped;
    // Check if the wrapper has a displayName after it has been memoized. Then assign it to the pure component.
    if (Wrapped.displayName) {
        pureComponent.displayName = Wrapped.displayName;
    }
    return pureComponent;
}
exports.styled = styled;
//# sourceMappingURL=styled.js.map