import { Rectangle } from 'leaflet';
import { WithProps, defineProps, num, str, on } from '../core/props.ts';
import { registerChildren, unregisterChildren } from '../core/register.ts';
import { buildOptions, isPathStyleAttr, parseBoundsAttr, updatePathStyle } from '../core/utils.ts';

const PROPS = defineProps({
  bounds: str(),
  color: str('#3388ff'),
  weight: num(3),
  opacity: num(1.0),
  fill: on(),
  fillColor: str('#3388ff'),
  fillOpacity: num(0.2),
});

export class LeafletRectangle extends WithProps(HTMLElement, PROPS) {
  #obj?: Rectangle;

  connectedCallback() {
    this.#obj = new Rectangle(parseBoundsAttr(this), buildOptions(this, PROPS, ['bounds']));
    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(parseBoundsAttr(this));
    } else if (isPathStyleAttr(name)) {
      updatePathStyle(this.#obj, name, val);
    }
  }
}

customElements.define('leaflet-rectangle', LeafletRectangle);