import { TileLayer } from 'leaflet';
import { buildOptions, buildAttrMap, setLayerAttr } from '../core/utils.ts';
import { withProps } from '../core/with-props.ts';

import { registerChildren, unregisterChildren } from '../core/register.ts';
import type { PropDef } from '../core/props.ts';

const PROPS = {
  url: { kind: 'str', attr: 'url', default: '' },
  attribution: { kind: 'str', attr: 'attribution', default: '' },
  minZoom: { kind: 'num', attr: 'min-zoom', default: 0 },
  maxZoom: { kind: 'num', attr: 'max-zoom', default: 18 },
  opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
  zIndex: { kind: 'num', attr: 'z-index', default: 0 },
} satisfies Record<string, PropDef>;

const PROP_BY_ATTR = buildAttrMap(PROPS);

export class LeafletTileLayer extends withProps(HTMLElement, PROPS) {
  #obj?: TileLayer;

  connectedCallback() {
    const url = this.getAttribute('url') || '';
    this.#obj = new TileLayer(url, buildOptions(this, PROPS, ['url']));
    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 === 'url') {
      if (val) this.#obj.setUrl(val);
    } else {
      setLayerAttr(this.#obj!, PROPS, PROP_BY_ATTR, name, val);
    }
  }
}

customElements.define('leaflet-tile-layer', LeafletTileLayer);