// Copyright 2022 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import '//resources/cr_elements/cr_menu_selector/cr_menu_selector.js';
import '//resources/cr_elements/cr_toggle/cr_toggle.js';
import { ColorChangeUpdater, COLORS_CSS_SELECTOR } from '//resources/cr_components/color_change_listener/colors_css_updater.js';
import { assert } from '//resources/js/assert.js';
import { CrRouter } from '//resources/js/cr_router.js';
import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js';
import { getCss } from './app.css.js';
import { getHtml } from './app.html.js';
export class WebuiGalleryAppElement extends CrLitElement {
    static get is() {
        return 'webui-gallery-app';
    }
    static get styles() {
        return getCss();
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            demos_: { type: Array },
        };
    }
    #demos__accessor_storage = [
        {
            name: 'Accessibility Live Regions',
            path: 'a11y',
            src: 'cr_a11y_announcer/cr_a11y_announcer_demo.js',
        },
        {
            name: 'Action Menus',
            path: 'action-menus',
            src: 'cr_action_menu/cr_action_menu_demo.js',
        },
        {
            name: 'Buttons',
            path: 'buttons',
            src: 'buttons/buttons_demo.js',
        },
        {
            name: 'Cards and rows',
            path: 'cards',
            src: 'card/card_demo.js',
        },
        {
            name: 'Checkboxes',
            path: 'checkboxes',
            src: 'cr_checkbox/cr_checkbox_demo.js',
        },
        {
            name: 'Chips',
            path: 'chips',
            src: 'cr_chip/cr_chip_demo.js',
        },
        {
            name: 'Dialogs',
            path: 'dialogs',
            src: 'cr_dialog/cr_dialog_demo.js',
        },
        {
            name: 'Icons',
            path: 'icons',
            src: 'cr_icons/cr_icons_demo.js',
        },
        {
            name: 'Inputs',
            path: 'inputs',
            src: 'cr_input/cr_input_demo.js',
        },
        {
            name: 'Navigation menus',
            path: 'nav-menus',
            src: 'nav_menu/nav_menu_demo.js',
        },
        {
            name: 'Progress indicators',
            path: 'progress',
            src: 'progress_indicators/progress_indicator_demo.js',
        },
        {
            name: 'Radio buttons and groups',
            path: 'radios',
            src: 'cr_radio/cr_radio_demo.js',
        },
        {
            name: 'Scroll view',
            path: 'scroll-view',
            src: 'scroll_view/scroll_view_demo.js',
        },
        {
            name: 'Select menu',
            path: 'select-menu',
            src: 'md_select/md_select_demo.js',
        },
        {
            name: 'Side panel',
            path: 'side-panel',
            src: 'side_panel/sp_components_demo.js',
        },
        {
            name: 'Sliders',
            path: 'sliders',
            src: 'cr_slider/cr_slider_demo.js',
        },
        {
            name: 'Tabs, native',
            path: 'tabs1',
            src: 'cr_tab_box/cr_tab_box_demo.js',
        },
        {
            name: 'Tabs, Lit',
            path: 'tabs2',
            src: 'cr_tabs/cr_tabs_demo.js',
        },
        {
            name: 'Toast',
            path: 'toast',
            src: 'cr_toast/cr_toast_demo.js',
        },
        {
            name: 'Toggles',
            path: 'toggles',
            src: 'cr_toggle/cr_toggle_demo.js',
        },
        {
            name: 'Toolbar',
            path: 'toolbar',
            src: 'cr_toolbar/cr_toolbar_demo.js',
        },
        {
            name: 'Tooltip',
            path: 'tooltip',
            src: 'cr_tooltip/cr_tooltip_demo.js',
        },
        {
            name: 'Tree, non-Polymer',
            path: 'tree',
            src: 'cr_tree/cr_tree_demo.js',
        },
        {
            name: 'URL List Item',
            path: 'url-list-item',
            src: 'cr_url_list_item/cr_url_list_item_demo.js',
        },
    ];
    get demos_() { return this.#demos__accessor_storage; }
    set demos_(value) { this.#demos__accessor_storage = value; }
    firstUpdated() {
        ColorChangeUpdater.forDocument().start();
        const router = CrRouter.getInstance();
        this.onPathChanged_(router.getPath());
        router.addEventListener('cr-router-path-changed', (e) => this.onPathChanged_(e.detail));
    }
    onMenuItemIronSelect_(e) {
        const newUrl = new URL(e.detail.item.href);
        CrRouter.getInstance().setPath(newUrl.pathname);
        this.onPathChanged_(newUrl.pathname);
    }
    // Prevent clicks on sidebar items from navigating and therefore reloading
    // the page. onMenuItemSelect_() handles loading new demos when selected.
    onMenuItemClick_(e) {
        e.preventDefault();
    }
    async onPathChanged_(newPath) {
        const path = newPath.substring(1);
        const demoIndex = path === '' ? 0 : this.demos_.findIndex(demo => demo.path === path);
        assert(demoIndex !== -1);
        this.$.selector.selected = demoIndex;
        const demo = this.demos_[demoIndex];
        const { tagName } = await import(`./demos/${demo.src}`);
        assert(tagName);
        const demoElement = document.createElement(tagName);
        this.$.main.innerHTML = window.trustedTypes.emptyHTML;
        this.$.main.appendChild(demoElement);
    }
    onFollowColorPipelineChange_(e) {
        if (e.detail) {
            assert(document.body.querySelector(COLORS_CSS_SELECTOR) === null);
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'chrome://theme/colors.css?sets=ui,chrome';
            document.body.appendChild(link);
            return;
        }
        const link = document.body.querySelector(COLORS_CSS_SELECTOR);
        assert(link);
        link.remove();
    }
}
customElements.define(WebuiGalleryAppElement.is, WebuiGalleryAppElement);
