import { CircleMarker } from 'leaflet';
import { buildOptions, numAttr } from '../core/utils.js';
import { withProps } from '../core/with-props.js';

import { registerChildren, unregisterChildren } from '../core/register.js';
import { isPathStyleAttr, updatePathStyle } from '../core/path-style.js';
import type { PropDef } from '../core/props.js';

const PROPS = {
  lat: { kind: 'num', attr: 'lat', default: 0 },
  lng: { kind: 'num', attr: 'lng', default: 0 },
  radius: { kind: 'num', attr: 'radius', default: 10 },
  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>;

export class LeafletCircleMarker extends withProps(HTMLElement, PROPS) {
  #obj?: CircleMarker;

  connectedCallback() {
    this.#obj = new CircleMarker(
      [numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')],
      buildOptions(this, PROPS, ['lat', 'lng']),
    );
    registerChildren(this, this.#obj);
  }

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

  attributeChangedCallback(name: string, _old: string | null, val: string | null) {
    if (!this.#obj) return;
    if (name === 'lat' || name === 'lng') {
      this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
    } else if (name === 'radius') {
      this.#obj.setRadius(numAttr(this, PROPS, 'radius'));
    } else if (isPathStyleAttr(name)) {
      updatePathStyle(this.#obj, name, val);
    }
  }
}

customElements.define('leaflet-circle-marker', LeafletCircleMarker);