import { SVGOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
import type { ImageOverlayOptions } from 'leaflet';
import { WithProps, defineProps, num, str, on, buildOptions } from '../core/props.ts';
import { registerChildren, unregisterChildren } from '../core/register.ts';
import { buildAttrMap, parseBoundsAttr, setLayerAttr } from '../core/attributes.ts';

const PROPS = defineProps({
  bounds: str(),
  opacity: num(1.0),
  interactive: on(),
  crossOrigin: str(),
  zIndex: num(),
  className: str(),
});

const PROP_BY_ATTR = buildAttrMap(PROPS);

export class LeafletSVGOverlay extends WithProps(HTMLElement, PROPS) {
  #obj?: SVGOverlay;

  connectedCallback() {
    const svg = this.querySelector('svg');
    const dummy = !svg ? document.createElementNS('http://www.w3.org/2000/svg', 'svg') : undefined;
    this.#obj = new SVGOverlay(
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      svg ?? dummy!,
      parseBoundsAttr(this),
      buildOptions(this, PROPS, ['bounds']) as ImageOverlayOptions,
    );
    registerChildren(this, this.#obj);
  }

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

  get leafletObject() {
    return this.#obj;
  }

  attributeChangedCallback(name: string, _old: string | null, val: string | null) {
    if (!this.#obj) return;
    if (name === 'bounds') {
      this.#obj.setBounds(new LatLngBounds(parseBoundsAttr(this) as LatLngExpression[]));
    } else {
      setLayerAttr(this.#obj, PROPS, PROP_BY_ATTR, name, val);
    }
  }
}

customElements.define('leaflet-svg-overlay', LeafletSVGOverlay);