import { __spreadArray } from "tslib";
import * as React from 'react';
import { SUPPORTS_CONSTRUCTABLE_STYLESHEETS, SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS, Stylesheet, makeShadowConfig, cloneCSSStyleSheet, } from '@fluentui/merge-styles';
import { useWindow } from '@fluentui/react-window-provider';
import { useMergeStylesRootStylesheets } from './useMergeStylesRootStylesheets';
import { useMergeStylesShadowRootContext } from './useMergeStylesShadowRoot';
/**
 * Use adopted stylesheets in the parent shadow root.
 */
export var useAdoptedStylesheet = function (stylesheetKey) {
    var shadowCtx = useMergeStylesShadowRootContext();
    var rootMergeStyles = useMergeStylesRootStylesheets();
    var win = useWindow();
    return useAdoptedStylesheetEx(stylesheetKey, shadowCtx, rootMergeStyles, win);
};
/**
 * Optimization for specific cases like nested customizables.
 */
export var useAdoptedStylesheetEx = function (stylesheetKey, shadowCtx, rootMergeStyles, win) {
    var polyfillInsertListners = React.useRef({});
    React.useEffect(function () {
        if (!shadowCtx) {
            return;
        }
        var polyfillListeners = polyfillInsertListners.current;
        polyfillInsertListners.current = {};
        return function () {
            Object.keys(polyfillListeners).forEach(function (key) {
                polyfillListeners[key]();
            });
        };
    }, [win, stylesheetKey, shadowCtx]);
    if (!shadowCtx) {
        return false;
    }
    if (shadowCtx.shadowRoot && !shadowCtx.stylesheets.has(stylesheetKey)) {
        var adoptableStyleSheet = rootMergeStyles.get(stylesheetKey);
        if (adoptableStyleSheet && (win === null || win === void 0 ? void 0 : win.document)) {
            adoptSheet(shadowCtx, win.document, stylesheetKey, adoptableStyleSheet, polyfillInsertListners.current);
        }
    }
    return true;
};
var updatePolyfillSheet = function (shadowCtx, stylesheetKey, rule) {
    var shadowRoot = shadowCtx.shadowRoot;
    var style = shadowRoot.querySelector("[data-merge-styles-stylesheet-key=\"".concat(stylesheetKey, "\"]"));
    if (style === null || style === void 0 ? void 0 : style.sheet) {
        style.sheet.insertRule(rule);
    }
};
var adoptSheet = function (shadowCtx, doc, stylesheetKey, stylesheet, listenerRef) {
    var _a, _b, _c, _d, _e;
    var shadowRoot = shadowCtx.shadowRoot;
    shadowCtx.stylesheets.set(stylesheetKey, stylesheet);
    if (SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
        // Maintain the sort order of Fluent style sheets
        var prevSheets = shadowRoot.adoptedStyleSheets;
        var i = prevSheets.length;
        var found = i === 0;
        while (i >= 0 && !found) {
            i--;
            var prevSheet = prevSheets[i];
            var prevSortOrder = (_b = (_a = prevSheet.metadata) === null || _a === void 0 ? void 0 : _a.sortOrder) !== null && _b !== void 0 ? _b : 0;
            var sheetSortOrder = (_d = (_c = stylesheet.metadata) === null || _c === void 0 ? void 0 : _c.sortOrder) !== null && _d !== void 0 ? _d : 0;
            if (prevSheet.bucketName === 'merge-styles' && prevSortOrder < sheetSortOrder) {
                found = true;
            }
        }
        if (SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS) {
            // The current spec allows the `adoptedStyleSheets` array to be modified.
            // Previous versions of the spec required a new array to be created.
            // For more details see: https://github.com/microsoft/fast/pull/6703
            shadowRoot.adoptedStyleSheets.splice(i + 1, 0, stylesheet);
        }
        else {
            shadowRoot.adoptedStyleSheets = __spreadArray(__spreadArray(__spreadArray([], shadowRoot.adoptedStyleSheets.slice(0, i + 1), true), [
                stylesheet
            ], false), shadowRoot.adoptedStyleSheets.slice(i + 1), true);
        }
    }
    else {
        var style = doc.createElement('style');
        style.setAttribute('data-merge-styles-stylesheet-key', stylesheetKey);
        var otherStyles = shadowRoot.querySelectorAll('[data-merge-styles-stylesheet-key]');
        if (otherStyles.length > 0) {
            shadowRoot.insertBefore(style, otherStyles[otherStyles.length - 1].nextSibling);
        }
        else {
            shadowRoot.insertBefore(style, shadowRoot.firstChild);
        }
        if (style.sheet) {
            cloneCSSStyleSheet(stylesheet, style.sheet);
            if (!listenerRef[stylesheetKey]) {
                var onInsert = function (_a) {
                    var key = _a.key, rule = _a.rule;
                    if (key === stylesheetKey) {
                        if (shadowCtx && rule) {
                            updatePolyfillSheet(shadowCtx, key, rule);
                        }
                    }
                };
                var polyfillSheet = Stylesheet.getInstance(makeShadowConfig(stylesheetKey, true, (_e = doc.defaultView) !== null && _e !== void 0 ? _e : undefined));
                listenerRef[stylesheetKey] = polyfillSheet.onInsertRule(onInsert);
            }
        }
    }
};
//# sourceMappingURL=useAdoptedStylesheet.js.map