import { Tooltip } from 'leaflet';
import type { TooltipOptions } from 'leaflet';
import { defineProps, num, str, on } from '../core/props.ts';
import { WithProps, buildOptions, numAttr, registerWithParent } from '../core/utils.ts';

const PROPS = defineProps({
  lat: num(),
  lng: num(),
  pane: str(),
  offset: str(),
  direction: str('auto'),
  permanent: on(),
  sticky: on(),
  opacity: num(1.0),
});

export default class LeafletTooltip extends WithProps(HTMLElement, PROPS) {
  #obj?: Tooltip;
  #observer?: MutationObserver;

  connectedCallback() {
    this.#obj = new Tooltip({
      ...buildOptions(this, PROPS, ['lat', 'lng']),
      content: this.innerHTML,
    } as unknown as TooltipOptions);
    if (this.hasAttribute('lat') && this.hasAttribute('lng')) {
      this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
    }
    registerWithParent(this, this.#obj);

    this.#observer = new MutationObserver(() => {
      this.#obj?.setContent(this.innerHTML);
    });
    this.#observer.observe(this, {
      childList: true,
      characterData: true,
      subtree: true,
    });
  }

  disconnectedCallback() {
    this.#observer?.disconnect();
    this.#observer = undefined;
    this.#obj?.remove();
    this.#obj = undefined;
  }

  attributeChangedCallback(name: string) {
    if (!this.#obj) return;
    if (name === 'lat' || name === 'lng') {
      this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
    }
  }
}

customElements.define('leaflet-tooltip', LeafletTooltip);