'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const __chunk_1 = require('./chunk-91f43df3.js');
const __chunk_2 = require('./chunk-a2a6832b.js');
const __chunk_3 = require('./chunk-146763b7.js');

class FeatureList {
    constructor(hostRef) {
        __chunk_1.registerInstance(this, hostRef);
        this.data = {};
        this.batchSize = 20;
        this.display = 'visible';
        this.features = [];
        this.item = true;
        this.loadingSpinner = 'bubbles';
        this.loadingText = __chunk_2._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 __chunk_3.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 = __chunk_1.h(ComponentTag, Object.assign({ feature: feature }, this.componentOptions));
            return (this.item) ? __chunk_1.h("ion-item", null, component) : component;
        });
        return ([
            __chunk_1.h("ion-list", null, __chunk_1.h("slot", { name: "start" }), items, __chunk_1.h("slot", { name: "end" })),
            __chunk_1.h("ion-infinite-scroll", { disabled: !hasMore }, __chunk_1.h("ion-infinite-scroll-content", { "loading-spinner": this.loadingSpinner, "loading-text": this.loadingText }))
        ]);
    }
    static get watchers() { return {
        "styleId": ["handleSourceId"],
        "sourceId": ["handleSourceId"]
    }; }
}

exports.gl_feature_list = FeatureList;
