import { DivIcon, type DivIconOptions, type PointExpression } from 'leaflet';
import { json, str, type PropDef } from '../core/props.ts';
import { emitIconChanged } from '../core/register.ts';
import { WithProps, type LeafletElementConstructor } from '../core/with-props.ts';

// Like leaflet-icon, rebuilt on every change -- including changes to the
// markup, which is what the icon renders when `html` isn't set.
const PROPS: {
  iconSize: PropDef<PointExpression>;
  iconAnchor: PropDef<PointExpression>;
  popupAnchor: PropDef<PointExpression>;
  tooltipAnchor: PropDef<PointExpression>;
  className: PropDef<string>;
  html: PropDef<string>;
  bgPos: PropDef<PointExpression>;
} = {
  iconSize: json<PointExpression>([0, 0]),
  iconAnchor: json<PointExpression>([0, 0]),
  popupAnchor: json<PointExpression>([0, 0]),
  tooltipAnchor: json<PointExpression>([0, 0]),
  className: str('leaflet-div-icon'),
  html: str(),
  bgPos: json<PointExpression>([0, 0]),
};
const Base: LeafletElementConstructor<DivIcon, typeof PROPS> = WithProps(PROPS, {
  attach: 'none',
  recreate: true,
});

/**
 * `<leaflet-div-icon>` — a Leaflet `DivIcon` (a CSS-styled marker icon). Child
 * of `<leaflet-marker>`; renders its own markup when `html` isn't set, and is
 * rebuilt on every change.
 */
export default class LeafletDivIconElement extends Base {
  declare readonly leafletObject?: DivIcon;

  #observer?: MutationObserver;

  createLeafletObject(options: DivIconOptions): DivIcon {
    return new DivIcon(this.innerHTML ? { ...options, html: this.innerHTML } : options);
  }

  connectedCallback(): void {
    super.connectedCallback();
    this.#observer = new MutationObserver(() => {
      this.recreateLeafletObject();
    });
    this.#observer.observe(this, { childList: true, characterData: true, subtree: true });
  }

  disconnectedCallback(): void {
    this.#observer?.disconnect();
    this.#observer = undefined;
    super.disconnectedCallback();
    emitIconChanged(this, null);
  }

  leafletObjectCreated(): void {
    emitIconChanged(this, this.leafletObject);
  }
}