import { Polygon } from 'leaflet';
import { registerWithParent, buildOptions } from '../core/utils.js';
import { createChildRegisterHandler, type ChildEntry } from '../core/register.js';
import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
import type { PropDef, PropTypesFromTable } from '../types/props.js';
import type { LeafletLine } from './leaflet-line.js';

const PROPS = {
  color: { kind: 'str', attr: 'color', default: '#3388ff' },
  weight: { kind: 'num', attr: 'weight', default: 3 },
  opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
  fill: { kind: 'bool-on', attr: 'fill' },
  fillColor: { kind: 'str', attr: 'fill-color', default: '#3388ff' },
  fillOpacity: { kind: 'num', attr: 'fill-opacity', default: 0.2 },
} satisfies Record<string, PropDef>;

type PropTypes = PropTypesFromTable<typeof PROPS>;
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;

export class LeafletPolygon extends TypedBase {
  #obj?: Polygon;
  #observer?: MutationObserver;
  #children = new Map<HTMLElement, ChildEntry>();
  #childHandler?: EventListener;

  static get observedAttributes() {
    return Object.values(PROPS).map((s) => s.attr);
  }

  static {
    for (const [name, spec] of Object.entries(PROPS)) {
      Object.defineProperty(LeafletPolygon.prototype, name, {
        get(this: LeafletPolygon) {
          const val = this.getAttribute(spec.attr);
          if (spec.kind === 'num') return val !== null ? Number(val) : spec.default;
          if (spec.kind === 'bool-on') return this.hasAttribute(spec.attr);
          return val ?? spec.default;
        },
        set(this: LeafletPolygon, v: number | string | boolean) {
          if (spec.kind === 'bool-on') this.toggleAttribute(spec.attr, !!v);
          else this.setAttribute(spec.attr, String(v));
        },
        configurable: true,
        enumerable: true,
      });
    }
  }

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

    this.addEventListener('line-updated', this.#syncCoords);
    this.#observer = new MutationObserver(() => this.#syncCoords());
    this.#observer.observe(this, { childList: true });
  }

  disconnectedCallback() {
    this.#observer?.disconnect();
    this.#observer = undefined;
    this.removeEventListener('line-updated', this.#syncCoords);
    if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
    this.#children.clear();
    this.#obj?.remove();
    this.#obj = undefined;
  }

  attributeChangedCallback(name: string, _old: string | null, val: string | null) {
    if (!this.#obj) return;
    if (isPathStyleAttr(name)) {
      updatePathStyle(this.#obj, name, val);
    }
  }

  #syncCoords = () => {
    this.#obj?.setLatLngs(this.#getCoords());
  };

  #getCoords(): [number, number][] {
    const lines = Array.from(this.querySelectorAll('leaflet-line')) as LeafletLine[];
    return lines.map((line) => line.latlng);
  }
}

customElements.define('leaflet-polygon', LeafletPolygon);