import { r as registerInstance, h } from './chunk-eb0263ab.js';
import { _ as _t } from './chunk-a41b3114.js';
import { g as getMap } from './chunk-caeafbad.js';

class FeatureList {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.data = {};
        this.batchSize = 20;
        this.display = 'visible';
        this.features = [];
        this.item = true;
        this.loadingSpinner = 'bubbles';
        this.loadingText = _t('webmapgl.feature-list.loading');
        this.order = 'asc';
    }
    componentWillLoad() {
        this.handleSourceId();
        const map = this.getMap();
        if (map)
            map.on('moveend', () => 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 || !style.json.sources)
            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();
    }
    getMap() {
        return getMap(this.mapId).map;
    }
    async filter() {
        if (!this.data.features)
            return;
        let features;
        if (this.display === 'all') {
            features = this.data.features;
        }
        else {
            let bounds = this.getMap().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)
            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) ?
            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("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 };
