import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { RenderableMixin } from '../mixins/RenderableMixin.js';
import reactive from '../decorators/reactive.js';
import styles from './DemoStyles.js';
import { RouteMixin } from '../mixins/RouteMixin.js';
import * as MonacoLoader from '../monaco/loader.js';
import typography from '../styles/m3/typography.module.js';
import surface from '../styles/m3/surface.module.js';
import { adaptStatic } from '../decorators/styles.js';
import '../md/icons/ui-icon.js';
import '../md/button/ui-button.js';
const Base = RenderableMixin(RouteMixin(EventTarget));
/**
 * A base class for demo pages in the API Client ecosystem.
 */
let DemoPage = (() => {
    let _classSuper = Base;
    let _staticExtraInitializers = [];
    let _static_get_styles_decorators;
    let _componentName_decorators;
    let _componentName_initializers = [];
    let _componentName_extraInitializers = [];
    let _darkThemeActive_decorators;
    let _darkThemeActive_initializers = [];
    let _darkThemeActive_extraInitializers = [];
    return class DemoPage extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _static_get_styles_decorators = [adaptStatic];
            _componentName_decorators = [reactive()];
            _darkThemeActive_decorators = [reactive()];
            __esDecorate(this, null, _static_get_styles_decorators, { kind: "getter", name: "styles", static: true, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _staticExtraInitializers);
            __esDecorate(this, null, _componentName_decorators, { kind: "accessor", name: "componentName", static: false, private: false, access: { has: obj => "componentName" in obj, get: obj => obj.componentName, set: (obj, value) => { obj.componentName = value; } }, metadata: _metadata }, _componentName_initializers, _componentName_extraInitializers);
            __esDecorate(this, null, _darkThemeActive_decorators, { kind: "accessor", name: "darkThemeActive", static: false, private: false, access: { has: obj => "darkThemeActive" in obj, get: obj => obj.darkThemeActive, set: (obj, value) => { obj.darkThemeActive = value; } }, metadata: _metadata }, _darkThemeActive_initializers, _darkThemeActive_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
            __runInitializers(this, _staticExtraInitializers);
        }
        static get styles() {
            return [typography, styles, surface];
        }
        #componentName_accessor_storage = __runInitializers(this, _componentName_initializers, ''
        /**
         * Determines whether the initial render had run and the `firstRender()`
         * function was called.
         */
        );
        /**
         * Component name rendered in the header section.
         */
        get componentName() { return this.#componentName_accessor_storage; }
        set componentName(value) { this.#componentName_accessor_storage = value; }
        #firstRendered_accessor_storage = (__runInitializers(this, _componentName_extraInitializers), false);
        /**
         * Determines whether the initial render had run and the `firstRender()`
         * function was called.
         */
        get firstRendered() { return this.#firstRendered_accessor_storage; }
        set firstRendered(value) { this.#firstRendered_accessor_storage = value; }
        #darkThemeActive_accessor_storage = __runInitializers(this, _darkThemeActive_initializers, false
        /**
         * For some demo pages, whether the user is authenticated in the store.
         */
        );
        /**
         * Whether or not the dark theme is active
         */
        get darkThemeActive() { return this.#darkThemeActive_accessor_storage; }
        set darkThemeActive(value) { this.#darkThemeActive_accessor_storage = value; }
        /**
         * For some demo pages, whether the user is authenticated in the store.
         */
        authenticated = (__runInitializers(this, _darkThemeActive_extraInitializers), false);
        constructor() {
            super();
            this.handleMediaQuery = this.handleMediaQuery.bind(this);
            this.initMediaQueries();
            document.body.classList.add('demo');
        }
        /**
         * Initializes media queries and observers.
         */
        initMediaQueries() {
            const matcher = window.matchMedia('(prefers-color-scheme: dark)');
            if (matcher.matches) {
                this.darkThemeActive = true;
            }
            this.themeActiveCallback();
            matcher.addEventListener('change', this.handleMediaQuery);
        }
        handleMediaQuery(e) {
            this.darkThemeActive = e.matches;
            this.themeActiveCallback();
        }
        /**
         * The callback is called when the `darkThemeActive` property change.
         * Overwrite this function to change the theme of the demo page.
         *
         * Note, this is not called by the `darkThemeActive` setter. This is called during the
         * initialization and then when the media query event is dispatched.
         * Call this manually when changing this value in the child page.
         */
        themeActiveCallback() {
            const { darkThemeActive } = this;
            if (darkThemeActive) {
                this.activateTheme('dark');
            }
            else {
                this.activateTheme('light');
            }
        }
        activateTheme(type) {
            const root = document.querySelector('html');
            if (!root) {
                return;
            }
            const { classList } = root;
            // clear all themes
            classList.forEach((value) => {
                if (value.startsWith('theme-')) {
                    classList.remove(value);
                }
            });
            const name = `theme-${type}`;
            classList.add(name);
        }
        /**
         * A handler for the `change` event for an element that has `checked` and `name` properties.
         * This can be used with `ui-switch`, `ui-checkbox`, and `checkbox` elements.
         *
         * The `name` should correspond to a variable name to be set. The set value is the value
         * of `checked` property read from the event's target.
         */
        _toggleBooleanOption(e) {
            const { name, checked } = e.target;
            this[name] = checked;
        }
        async loadMonaco() {
            const base = new URL('/node_modules/monaco-editor/', window.location.href).toString();
            MonacoLoader.createEnvironment(base);
            await MonacoLoader.loadMonaco(base);
            await MonacoLoader.monacoReady();
        }
        /**
         * The page render function. Usually you don't need to use it.
         * It renders the header template, main section, and the content.
         */
        pageTemplate() {
            return html ` ${this.headerTemplate()} ${this.navigationTemplate()}
      <main>${this.contentTemplate()}</main>`;
        }
        /**
         * Call this on the top of the `render()` method to render demo navigation
         * @returns HTML template for demo header
         */
        headerTemplate() {
            const { componentName } = this;
            return html ` <header>${componentName ? html `<h1 class="api-title">${componentName}</h1>` : ''}</header>`;
        }
        navigationTemplate() {
            return html ``;
        }
        handleAuthenticate() {
            // ...
        }
        authenticateTemplate() {
            return html `
      <p>Store authorization required.</p>
      <ui-button color="filled" @click="${this.handleAuthenticate}">Authenticate</ui-button>
    `;
        }
    };
})();
export { DemoPage };
//# sourceMappingURL=DemoPage.js.map