import { toArray } from '../utils';
import pointOnFeature from '@turf/point-on-feature';
import helpers from '@turf/helpers';
export class Popup {
    constructor() {
        this.features = [];
        this.clickEventDelay = 50;
        this.closeKey = 27;
        this.maxWidth = 'none';
    }
    getOptions() {
        if (typeof this.componentOptions === 'string')
            return JSON.parse(this.componentOptions);
        return this.componentOptions || {};
    }
    handleFeatureClick(e) {
        let style = this.el.closest('gl-style');
        let layers = toArray(this.layers).map((layer) => `${style.id}:${layer}`);
        let features = e.detail.features
            .filter((feature) => layers.indexOf(feature.layer.id) !== -1);
        if (!features.length)
            return;
        if (this.clickEventDelay) {
            Array.prototype.push.apply(this.features, features);
            if (!this.popupTimeout) {
                this.popupTimeout = window.setTimeout(async () => {
                    this.popupTimeout = null;
                    if (this.features.length)
                        this.openPopup(this.features);
                    this.features = [];
                }, this.clickEventDelay);
            }
        }
        else {
            this.openPopup(features);
        }
    }
    handleKeyup(e) {
        if (e.keyCode === this.closeKey)
            this.removePopup();
    }
    async isOpen() {
        return (this.popup) ? this.popup.isOpen() : false;
    }
    async removePopup() {
        if (this.popup)
            this.popup.remove();
    }
    openPopup(features) {
        let featureCollection = helpers.featureCollection(features);
        let point = pointOnFeature(featureCollection);
        let component = document.createElement(this.component);
        component['features'] = features;
        let options = this.getOptions();
        for (let propName in this.getOptions())
            component[propName] = options[propName];
        this.popup = new mapboxgl.Popup({ maxWidth: this.maxWidth })
            .setLngLat(point.geometry.coordinates)
            .setDOMContent(component)
            .addTo(this.el.closest('gl-map').map);
    }
    static get is() { return "gl-popup"; }
    static get originalStyleUrls() { return {
        "$": ["popup.css"]
    }; }
    static get styleUrls() { return {
        "$": ["popup.css"]
    }; }
    static get properties() { return {
        "clickEventDelay": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "click-event-delay",
            "reflect": false,
            "defaultValue": "50"
        },
        "closeKey": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "close-key",
            "reflect": false,
            "defaultValue": "27"
        },
        "component": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "component",
            "reflect": false
        },
        "componentOptions": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "component-options",
            "reflect": false
        },
        "layers": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string[] | string",
                "resolved": "string | string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "layers",
            "reflect": false
        },
        "maxWidth": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "max-width",
            "reflect": false,
            "defaultValue": "'none'"
        }
    }; }
    static get methods() { return {
        "isOpen": {
            "complexType": {
                "signature": "() => Promise<any>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<any>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "removePopup": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get listeners() { return [{
            "name": "glFeatureClick",
            "method": "handleFeatureClick",
            "target": "body",
            "capture": false,
            "passive": false
        }, {
            "name": "keyup",
            "method": "handleKeyup",
            "target": "body",
            "capture": false,
            "passive": false
        }]; }
}
