/**
 * Copyright Aquera Inc 2023
 *
 * 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 } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-command-menu-group.css';
import { HasSlotController } from '../internal/slot';
import NileElement from '../internal/nile-element';
import type { CSSResultGroup } from 'lit';

/**
 * Groups related commands under an optional heading inside a `nile-command-menu`.
 *
 * @tag nile-command-menu-group
 *
 * @summary A labelled section of command items within a command menu.
 * @status stable
 * @since 2.0
 *
 * @slot - The group's command items (`nile-command-menu-item`).
 * @slot heading - The group heading. Takes precedence over the `heading` attribute when provided.
 *
 * @csspart base - The component's base wrapper.
 * @csspart heading - The group heading.
 * @csspart items - The wrapper around the slotted items.
 */
@customElement('nile-command-menu-group')
export class NileCommandMenuGroup extends NileElement {
  static styles: CSSResultGroup = styles;

  private readonly hasSlotController = new HasSlotController(this, 'heading');

  /** The text heading shown above the group's items. Use the `heading` slot for richer content. */
  @property() heading = '';

  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('role', 'group');
  }

  render() {
    const hasHeading = this.heading.length > 0 || this.hasSlotController.test('heading');

    return html`
      <div part="base" class="group">
        <div
          part="heading"
          class=${classMap({
            group__heading: true,
            'group__heading--empty': !hasHeading,
          })}
        >
          <slot name="heading">${this.heading}</slot>
        </div>
        <slot part="items" class="group__items"></slot>
      </div>
    `;
  }
}

export default NileCommandMenuGroup;

declare global {
  interface HTMLElementTagNameMap {
    'nile-command-menu-group': NileCommandMenuGroup;
  }
}