import { LitElement } from 'lit';
import { style } from './zui-base-css.js';
import type { CSSResult, CSSResultArray } from 'lit';

export abstract class ZuiBaseElement extends LitElement {
  static styles: CSSResult | CSSResult[] | CSSResultArray = [style];

  static #elements: Map<string, HTMLElement[]> = new Map();

  /**
   * A protected method to retrieve important elements in the global state
   * @param tagName The tag name of the element to retrieve
   * @returns An array of elements with the specified tag name, or undefined if none are found
   */
  protected _getElements(tagName: string): HTMLElement[] {
    return ZuiBaseElement.#elements.get(tagName) ?? [];
  }

  /**
   * A protected method to store off important elements in the global state
   * @param element The element to store
   */
  protected _storeElement(element: HTMLElement): void {
    const elements = ZuiBaseElement.#elements.get(element.tagName) ?? [];
    elements.push(element);
    ZuiBaseElement.#elements.set(element.tagName, elements);
  }

  /**
   * A protected method to remove important elements from the global state
   * @param element The element to remove
   */
  protected _removeElement(element: HTMLElement): void {
    const elements = ZuiBaseElement.#elements.get(element.tagName) ?? [];
    const index = elements.indexOf(element);
    if (index > -1) {
      elements.splice(index, 1);
      ZuiBaseElement.#elements.set(element.tagName, elements);
    }
  }
}