/**
 * Copyright Aquera Inc 2026
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { html, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-context-menu-group.css';
import NileElement from '../internal/nile-element';

/**
 * Nile context-menu group. Groups related items inside a `nile-context-menu`.
 *
 * @tag nile-context-menu-group
 *
 * @slot - Default slot for `nile-context-menu-item` children.
 */
@customElement('nile-context-menu-group')
export class NileContextMenuGroup extends NileElement {
  public static get styles(): CSSResultArray {
    return [styles];
  }

  @property({ attribute: true, type: String, reflect: true }) label = '';

  private static _idSeq = 0;
  private readonly _labelId = `nile-context-menu-group-label-${++NileContextMenuGroup._idSeq}`;

  public render(): TemplateResult {
    const heading = this.label || this.id;
    return html`
      <div
        part="group"
        class="group"
        role="group"
        aria-labelledby=${heading ? this._labelId : undefined}
      >
        ${heading
          ? html`<div part="label" class="label" id=${this._labelId}>${heading}</div>`
          : null}
        <slot></slot>
      </div>
    `;
  }
}

export default NileContextMenuGroup;

declare global {
  interface HTMLElementTagNameMap {
    'nile-context-menu-group': NileContextMenuGroup;
  }
}