import { LayerGroup } from 'leaflet';
import { buildOptions, registerWithParent } from '../core/utils.js';
import { createChildRegisterHandler, type ChildEntry } from '../core/register.js';

const PROPS = {} as const satisfies Record<string, never>;

export class LeafletLayerGroup extends HTMLElement {
  #obj?: LayerGroup;
  #children = new Map<HTMLElement, ChildEntry>();
  #childHandler?: (e: Event) => void;

  static get observedAttributes() {
    return [];
  }

  connectedCallback() {
    this.#obj = new LayerGroup([], buildOptions(this, PROPS));
    this.#childHandler = createChildRegisterHandler(this.#obj, this.#children) as EventListener;
    this.addEventListener('leaflet-register', this.#childHandler);
    registerWithParent(this, this.#obj);
  }

  disconnectedCallback() {
    if (this.#childHandler) {
      this.removeEventListener('leaflet-register', this.#childHandler);
    }
    for (const [el] of this.#children) {
      this.#obj?.removeLayer(el as unknown as LayerGroup);
    }
    this.#children.clear();
    this.#obj?.remove();
    this.#obj = undefined;
  }
}

customElements.define('leaflet-layer-group', LeafletLayerGroup);