import { loadManifestPlainCss } from '../../../libs/extension-api/index.js';
import { umbExtensionsRegistry } from '../extension-registry/index.js';
import { UmbContextBase } from '../../../libs/class-api/index.js';
import { UmbContextToken } from '../../../libs/context-api/index.js';
import { UmbStringState } from '../../../libs/observable-api/index.js';
const LOCAL_STORAGE_KEY = 'umb-theme-alias';
export class UmbThemeContext extends UmbContextBase {
    #theme;
    #themeObserver;
    #styleElement;
    constructor(host) {
        super(host, UMB_THEME_CONTEXT);
        this.#theme = new UmbStringState('umb-light-theme');
        this.theme = this.#theme.asObservable();
        this.#styleElement = null;
        const storedTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
        if (storedTheme) {
            this.setThemeByAlias(storedTheme);
        }
    }
    setThemeByAlias(themeAlias) {
        this.#theme.setValue(themeAlias);
        this.#themeObserver?.destroy();
        if (themeAlias) {
            localStorage.setItem(LOCAL_STORAGE_KEY, themeAlias);
            this.#themeObserver = this.observe(umbExtensionsRegistry.byTypeAndFilter('theme', (extension) => extension.alias === themeAlias), async (themes) => {
                this.#styleElement?.remove();
                if (themes.length > 0 && themes[0].css) {
                    const activeTheme = themes[0];
                    if (typeof activeTheme.css === 'function') {
                        this.#styleElement = document.createElement('style');
                        // We store the current style element so we can check if it has been replaced by another theme in between.
                        const currentStyleEl = this.#styleElement;
                        currentStyleEl.setAttribute('type', 'text/css');
                        const result = await loadManifestPlainCss(activeTheme.css);
                        // Checking that this is still our styleElement, it has not been replaced with another theme in between.
                        if (result && currentStyleEl === this.#styleElement) {
                            currentStyleEl.appendChild(document.createTextNode(result));
                            document.head.appendChild(currentStyleEl);
                        }
                    }
                    else if (typeof activeTheme.css === 'string') {
                        this.#styleElement = document.createElement('link');
                        this.#styleElement.setAttribute('rel', 'stylesheet');
                        this.#styleElement.setAttribute('href', activeTheme.css);
                        document.head.appendChild(this.#styleElement);
                    }
                }
                else {
                    // We could not load a theme for this alias, so we remove the theme.
                    localStorage.removeItem(LOCAL_STORAGE_KEY);
                    this.#styleElement?.childNodes.forEach((node) => node.remove());
                    this.#styleElement?.setAttribute('href', '');
                    this.#styleElement = null;
                }
            });
        }
        else {
            // Super clean, we got a falsy value, so we remove the theme.
            localStorage.removeItem(LOCAL_STORAGE_KEY);
            this.#styleElement?.remove();
            this.#styleElement?.childNodes.forEach((node) => node.remove());
            this.#styleElement?.setAttribute('href', '');
            this.#styleElement = null;
        }
    }
}
export const UMB_THEME_CONTEXT = new UmbContextToken('umbThemeContext');
// Default export to enable this as a globalContext extension js:
export default UmbThemeContext;
