import { __assign, __extends } from "tslib";
/* eslint no-restricted-globals: 0 */
import { InjectionMode, STYLESHEET_SETTING, Stylesheet } from './Stylesheet';
import { DEFAULT_SHADOW_CONFIG, GLOBAL_STYLESHEET_KEY, SHADOW_DOM_STYLESHEET_SETTING } from './shadowConfig';
export var SUPPORTS_CONSTRUCTABLE_STYLESHEETS = typeof document !== 'undefined' && Array.isArray(document.adoptedStyleSheets) && 'replace' in CSSStyleSheet.prototype;
var supportsModifyingAdoptedStyleSheets = false;
if (SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
    try {
        document.adoptedStyleSheets.push();
        supportsModifyingAdoptedStyleSheets = true;
    }
    catch (e) {
        supportsModifyingAdoptedStyleSheets = false;
    }
}
export var SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS = supportsModifyingAdoptedStyleSheets;
var _stylesheet;
var _global = {};
// Grab window.
try {
    // Why the cast?
    // if compiled/type checked in same program with `@fluentui/font-icons-mdl2` which extends `Window` on global
    // ( check packages/font-icons-mdl2/src/index.ts ) the definitions don't match! Thus the need of this extra assertion
    _global = (window || {});
}
catch (_a) {
    /* leave as blank object */
}
var copyOldGlobalRules = function (stylesheet, inShadow, win, doc) {
    var _a;
    if (inShadow === void 0) { inShadow = false; }
    if (!doc) {
        // SSR
        return;
    }
    var oldGlobalRules = doc.querySelectorAll('[data-merge-styles]');
    if (oldGlobalRules) {
        stylesheet.setConfig({
            window: win,
            inShadow: inShadow,
            stylesheetKey: GLOBAL_STYLESHEET_KEY,
        });
        for (var i = 0; i < oldGlobalRules.length; i++) {
            var styleElem = oldGlobalRules[i];
            styleElem.setAttribute('data-merge-styles-global', 'true');
            var cssRules = ((_a = styleElem.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) || [];
            for (var j = 0; j < cssRules.length; j++) {
                var rule = cssRules[j];
                stylesheet.insertRule(rule.cssText);
            }
        }
    }
};
var ShadowDomStylesheet = /** @class */ (function (_super) {
    __extends(ShadowDomStylesheet, _super);
    function ShadowDomStylesheet(config, serializedStylesheet) {
        var _this = _super.call(this, config, serializedStylesheet) || this;
        _this._onAddSheetCallbacks = [];
        _this._sheetCounter = 0;
        _this._adoptableSheets = new Map();
        _global[SHADOW_DOM_STYLESHEET_SETTING] = ShadowDomStylesheet;
        return _this;
    }
    ShadowDomStylesheet.getInstance = function (shadowConfig) {
        var sConfig = shadowConfig || DEFAULT_SHADOW_CONFIG;
        var stylesheetKey = sConfig.stylesheetKey || GLOBAL_STYLESHEET_KEY;
        var inShadow = sConfig.inShadow;
        var win = sConfig.window || (typeof window !== 'undefined' ? window : undefined);
        var global = (win || _global);
        var doc = win ? win.document : typeof document !== 'undefined' ? document : undefined;
        _stylesheet = global[STYLESHEET_SETTING];
        // When an app has multiple versions of Fluent v8 it is possible
        // that an older version of Stylesheet is initialized before
        // the version that supports shadow DOM. We check for this case
        // and re-initialize the stylesheet in that case.
        var oldStylesheetInitializedFirst = _stylesheet && !_stylesheet.getAdoptedSheets;
        if (!_stylesheet ||
            oldStylesheetInitializedFirst ||
            (_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== doc)) {
            var fabricConfig = (global === null || global === void 0 ? void 0 : global.FabricConfig) || {};
            var defaultMergeStyles = {
                window: win,
                inShadow: inShadow,
                stylesheetKey: stylesheetKey,
            };
            fabricConfig.mergeStyles = fabricConfig.mergeStyles || {};
            fabricConfig.mergeStyles = __assign(__assign({}, defaultMergeStyles), fabricConfig.mergeStyles);
            var stylesheet = void 0;
            if (oldStylesheetInitializedFirst) {
                stylesheet = new ShadowDomStylesheet(fabricConfig.mergeStyles, JSON.parse(_stylesheet.serialize()));
                copyOldGlobalRules(stylesheet, inShadow, win, doc);
            }
            else {
                stylesheet = new ShadowDomStylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);
            }
            _stylesheet = stylesheet;
            global[STYLESHEET_SETTING] = _stylesheet;
        }
        else {
            _stylesheet.setConfig({
                window: win,
                inShadow: inShadow,
                stylesheetKey: stylesheetKey,
            });
        }
        if (win) {
            _stylesheet._getAdoptableStyleSheet(stylesheetKey);
        }
        return _stylesheet;
    };
    ShadowDomStylesheet.prototype.getAdoptedSheets = function () {
        return this._adoptableSheets;
    };
    ShadowDomStylesheet.prototype.onAddSheet = function (callback) {
        var _this = this;
        this._onAddSheetCallbacks.push(callback);
        return function () {
            _this._onAddSheetCallbacks = _this._onAddSheetCallbacks.filter(function (cb) { return cb !== callback; });
        };
    };
    ShadowDomStylesheet.prototype.insertRule = function (rule, preserve) {
        var _a = this._config, injectionMode = _a.injectionMode, _b = _a.stylesheetKey, stylesheetKey = _b === void 0 ? GLOBAL_STYLESHEET_KEY : _b;
        var injectStyles = injectionMode !== InjectionMode.none;
        var addToConstructableStylesheet = stylesheetKey === GLOBAL_STYLESHEET_KEY || !!this._adoptableSheets.has(stylesheetKey);
        var constructableSheet = undefined;
        if (injectStyles && addToConstructableStylesheet) {
            constructableSheet = this._getAdoptableStyleSheet(stylesheetKey);
        }
        if (constructableSheet) {
            this._insertRuleIntoSheet(constructableSheet, rule);
        }
        _super.prototype.insertRule.call(this, rule, preserve, stylesheetKey);
    };
    ShadowDomStylesheet.prototype._getCacheKey = function (key) {
        var _a = this._config, _b = _a.inShadow, inShadow = _b === void 0 ? false : _b, _c = _a.stylesheetKey, currentStylesheetKey = _c === void 0 ? GLOBAL_STYLESHEET_KEY : _c;
        if (inShadow) {
            return "__".concat(currentStylesheetKey, "__").concat(key);
        }
        return _super.prototype._getCacheKey.call(this, key);
    };
    ShadowDomStylesheet.prototype._createStyleElement = function () {
        var styleElement = _super.prototype._createStyleElement.call(this);
        if (this._config.stylesheetKey === GLOBAL_STYLESHEET_KEY) {
            styleElement.setAttribute('data-merge-styles-global', 'true');
        }
        return styleElement;
    };
    ShadowDomStylesheet.prototype._makeCSSStyleSheet = function () {
        var win = this._config.window || window;
        var sheet = undefined;
        if (!SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
            var style = this._createStyleElement();
            sheet = style.sheet;
        }
        else {
            sheet = new win.CSSStyleSheet();
        }
        if (sheet) {
            sheet.bucketName = 'merge-styles';
            sheet.metadata = {
                stylesheetKey: this._config.stylesheetKey || GLOBAL_STYLESHEET_KEY,
                sortOrder: this._sheetCounter++,
            };
        }
        return sheet;
    };
    ShadowDomStylesheet.prototype._addAdoptableStyleSheet = function (key, sheet, queue) {
        var _this = this;
        if (queue === void 0) { queue = true; }
        if (!this._adoptableSheets.has(key)) {
            this._adoptableSheets.set(key, sheet);
            var win = this._config.window;
            if (queue && win) {
                win.queueMicrotask(function () {
                    _this._onAddSheetCallbacks.forEach(function (callback) { return callback({ key: key, sheet: sheet }); });
                });
            }
        }
    };
    ShadowDomStylesheet.prototype._getAdoptableStyleSheet = function (key) {
        var sheet = this._adoptableSheets.get(key);
        if (!sheet) {
            sheet = this._makeCSSStyleSheet();
            this._addAdoptableStyleSheet(key, sheet);
        }
        return sheet;
    };
    return ShadowDomStylesheet;
}(Stylesheet));
export { ShadowDomStylesheet };
//# sourceMappingURL=ShadowDomStylesheet.js.map