import { __decorate } from "tslib";
import { html } from 'lit';
import { RenderableMixin } from '../../mixins/RenderableMixin.js';
import { reactive } from '../../lib/decorators.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 '../../define/ui/ui-icon.js';
import '../../define/ui/ui-button.js';
/**
 * A base class for demo pages in the API Client ecosystem.
 */
export class DemoPage extends RouteMixin(RenderableMixin(EventTarget)) {
    static get styles() {
        return [typography, styles, surface];
    }
    constructor() {
        super();
        /**
         * Component name rendered in the header section.
         */
        this.componentName = '';
        /**
         * Determines whether the initial render had run and the `firstRender()`
         * function was called.
         */
        this.firstRendered = false;
        /**
         * Whether or not the dark theme is active
         */
        this.darkThemeActive = false;
        /**
         * For some demo pages, whether the user is authenticated in the store.
         */
        this.authenticated = false;
        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;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        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 @click="${this.handleAuthenticate}">Authenticate</ui-button>
    `;
    }
}
__decorate([
    reactive()
], DemoPage.prototype, "componentName", void 0);
__decorate([
    reactive()
], DemoPage.prototype, "darkThemeActive", void 0);
//# sourceMappingURL=DemoPage.js.map