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

import { registerChildren, unregisterChildren } from '../core/register.ts';
import { defineProps, num, str, on } from '../core/props.ts';

const PROPS = defineProps({
  url: str(),
  layers: str(),
  styles: str(),
  format: str('image/jpeg'),
  transparent: on(),
  version: str('1.1.1'),
  uppercase: on(),
});

const PROP_BY_ATTR = buildAttrMap(PROPS);

export default class LeafletTileLayerWMS extends WithProps(HTMLElement, PROPS) {
  #obj?: TileLayer.WMS;

  connectedCallback() {
    const url = this.getAttribute('url') || '';
    this.#obj = new TileLayer.WMS(
      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 {
      const propName = PROP_BY_ATTR.get(name);
      if (!propName) return;
      const spec = PROPS[propName as keyof typeof PROPS];
      if (!setLayerAttr(this.#obj!, PROPS, PROP_BY_ATTR, name, val)) {
        const value = spec.kind === 'bool-on' ? val !== null : parseAttributeValue(val);
        (this.#obj.setParams as unknown as (params: Record<string, unknown>) => void)({
          [propName]: value,
        });
      }
    }
  }
}

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