import { r as registerInstance, h, H as Host } from './index-cb74209c.js';
import { _ as _t } from './i18n-c66f020d.js';
import { g as getMap } from './utils-0af5fee1.js';
import './_commonjsHelpers-4d8f6371.js';

const FeatureList = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.data = undefined;
    this.limit = undefined;
    this.batchSize = 20;
    this.component = undefined;
    this.componentOptions = undefined;
    this.display = "visible";
    this.features = [];
    this.item = true;
    this.loadingSpinner = "bubbles";
    this.loadingText = _t("webmapgl.feature-list.loading");
    this.mapId = undefined;
    this.orderBy = undefined;
    this.order = "asc";
    this.styleId = undefined;
    this.sourceId = undefined;
  }
  async componentWillLoad() {
    await this.handleSourceId();
  }
  componentDidLoad() {
    const map = getMap(this.mapId).map;
    if (map != undefined)
      map.on("moveend", async () => await this.filter());
  }
  handleInfiniteScroll(e) {
    this.limit += this.batchSize;
    e.target.complete();
  }
  handleStyleUpdated(e) {
    if (e.detail.id === this.styleId)
      this.handleSourceId();
  }
  async handleSourceId() {
    const style = document.querySelector(`#${this.styleId}`);
    if (style == undefined || style.json.sources == undefined)
      return;
    const data = style.json.sources[this.sourceId].data;
    if (typeof data === "string") {
      let res = await fetch(data);
      this.data = (await res.json());
    }
    else {
      this.data = data;
    }
    this.filter();
  }
  async filter() {
    var _a;
    if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.features) == undefined || this.data.features.length === 0)
      return;
    let features;
    if (this.display === "all") {
      features = this.data.features;
    }
    else {
      let bounds = getMap(this.mapId).map.getBounds();
      features = this.data.features.filter((feature) => {
        let [lng, lat] = feature.geometry.coordinates;
        return (lng >= bounds.getWest() &&
          lng <= bounds.getEast() &&
          lat >= bounds.getSouth() &&
          lat <= bounds.getNorth());
      });
    }
    this.limit = this.batchSize;
    this.features = this.sort(features);
  }
  sort(features) {
    if (this.order === "none" || this.orderBy == undefined)
      return features;
    features.sort((aFeature, bFeature) => {
      const a = aFeature.properties[this.orderBy];
      const b = bFeature.properties[this.orderBy];
      if (a < b)
        return this.order === "asc" ? -1 : 1;
      if (a > b)
        return this.order === "asc" ? 1 : -1;
      return 0;
    });
    return features;
  }
  render() {
    let ComponentTag = this.component;
    let features = this.limit !== 0 ? this.features.slice(0, this.limit) : this.features;
    let hasMore = features.length < this.features.length;
    let items = features.map((feature) => {
      let component = (h(ComponentTag, Object.assign({ feature: feature }, this.componentOptions)));
      return this.item ? h("ion-item", null, component) : component;
    });
    return (h(Host, null, h("ion-list", null, h("slot", { name: "start" }), items, h("slot", { name: "end" })), h("ion-infinite-scroll", { disabled: !hasMore }, h("ion-infinite-scroll-content", { "loading-spinner": this.loadingSpinner, "loading-text": this.loadingText }))));
  }
  static get watchers() { return {
    "styleId": ["handleSourceId"],
    "sourceId": ["handleSourceId"]
  }; }
};

export { FeatureList as gl_feature_list };

//# sourceMappingURL=gl-feature-list.entry.js.map