/**
 * 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 { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-side-bar-group.css';
import NileElement from '../internal/nile-element';

/**
 * Nile side-bar-group component.
 *
 * A logical grouping of sidebar items, optionally with a label and/or footer placement.
 *
 * @tag nile-side-bar-group
 *
 * @slot - Default slot for group items (nile-side-bar-group-item)
 * @csspart base - The group container
 * @csspart label - The group label element
 */
@customElement('nile-side-bar-group')
export class NileSideBarGroup extends NileElement {
  /**
   * Optional label for the group.
   */
  @property({ type: String }) label: string = '';

  /**
   * Marks this group as footer (sticks to bottom of sidebar).
   */
  @property({ type: Boolean, reflect: true }) footer: boolean = false;
  @property({ type: Boolean, reflect: true })divider = false;


  /**
   * The styles for nile-side-bar-group
   * @remarks Extendable via super if needed
   */
  public static get styles(): CSSResultArray {
    return [styles];
  }

  /* #region Render */

  public render(): TemplateResult {
    return html`
      <section
        part="base"
        class="side-bar-group" 
        role="list"
        aria-label=${this.label || 'Sidebar group'}
        ?data-footer=${this.footer}
      >
        ${this.label
          ? html`<div part="label" class="group-label">${this.label}</div>`
          : null}
        <slot></slot>
      </section>
    `;
  }

  /* #endregion */
}

export default NileSideBarGroup;

declare global {
  interface HTMLElementTagNameMap {
    'nile-side-bar-group': NileSideBarGroup;
  }
}