// Copyright 2026 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_action_menu/cr_action_menu.js';
import '//resources/cr_elements/cr_icon/cr_icon.js';
import '//resources/cr_elements/cr_lazy_render/cr_lazy_render_lit.js';
import { WebUiListenerMixinLit } from '//resources/cr_elements/web_ui_listener_mixin_lit.js';
import { assert } from '//resources/js/assert.js';
import { CrLitElement } from '//resources/lit/v3_0/lit.rollup.js';
import { openMenu } from '../shared/common.js';
import { getCss } from './action_menu.css.js';
import { getHtml } from './grouped_action_menu.html.js';
const GroupedActionMenuElementBase = WebUiListenerMixinLit(CrLitElement);
// Represents a dropdown menu that contains groups of items with a header and
// optional separator per group.
export class GroupedActionMenuElement extends GroupedActionMenuElementBase {
    static get is() {
        return 'grouped-action-menu';
    }
    static get styles() {
        return getCss();
    }
    render() {
        return getHtml.bind(this)();
    }
    static get properties() {
        return {
            menuGroups: { type: Array },
            label: { type: String },
            nonModal: { type: Boolean },
            closeOnClick: { type: Boolean },
        };
    }
    #menuGroups_accessor_storage = [];
    get menuGroups() { return this.#menuGroups_accessor_storage; }
    set menuGroups(value) { this.#menuGroups_accessor_storage = value; }
    #nonModal_accessor_storage = false;
    get nonModal() { return this.#nonModal_accessor_storage; }
    set nonModal(value) { this.#nonModal_accessor_storage = value; }
    #closeOnClick_accessor_storage = true;
    get closeOnClick() { return this.#closeOnClick_accessor_storage; }
    set closeOnClick(value) { this.#closeOnClick_accessor_storage = value; }
    #label_accessor_storage = '';
    // Initializing to random value, but this is set by the parent.
    get label() { return this.#label_accessor_storage; }
    set label(value) { this.#label_accessor_storage = value; }
    open(anchor, showAtConfig) {
        openMenu(this.$.lazyMenu.get(), anchor, showAtConfig, /* onShow= */ undefined, this.nonModal);
    }
    close() {
        this.$.lazyMenu.get().close();
    }
    onClick_(e) {
        const currentTarget = e.currentTarget;
        const groupIndex = Number.parseInt(currentTarget.dataset['groupIndex']);
        const itemIndex = Number.parseInt(currentTarget.dataset['itemIndex']);
        const group = this.menuGroups[groupIndex];
        assert(group);
        const menuItem = group.items[itemIndex];
        assert(menuItem);
        this.fire(group.eventName, { data: menuItem.data });
        if (this.closeOnClick) {
            this.$.lazyMenu.get().close();
        }
    }
    getAriaOwns_(groupIndex, length) {
        return Array
            .from({ length }, (_, itemIndex) => `group-${groupIndex}-item-${itemIndex}`)
            .join(' ');
    }
}
customElements.define(GroupedActionMenuElement.is, GroupedActionMenuElement);
