import { toArray } from '../utils';
let _nextId = 0;
export class Style {
    constructor() {
        this.handlers = {
            'click': (e) => this.handleClick(e),
            'mouseenter': () => this.handleMouseenter(),
            'mouseleave': () => this.handleMouseleave()
        };
        this.basemap = false;
        this.clickableLayers = [];
        this.enabled = true;
        this.json = {};
    }
    componentWillLoad() {
        if (!this.el.id) {
            this.el.id = 'style-' + _nextId.toString();
            _nextId += 1;
        }
        if (this.url)
            this.fetchJSON();
    }
    componentDidLoad() {
        if (this.clickableLayers && this.clickableLayers.length)
            this.updateClickable(this.clickableLayers);
        this.glStyleElementAdded.emit(this.eventDetail());
    }
    componentDidUpdate() {
        this.glStyleElementModified.emit(this.eventDetail());
    }
    componentDidUnload() {
        this.glStyleElementRemoved.emit(this.eventDetail());
    }
    eventDetail() {
        return {
            id: this.el.id,
            style: this
        };
    }
    getMap() {
        return this.el.closest('gl-map').map;
    }
    async fetchJSON() {
        let res = await fetch(this.url);
        this.json = await res.json();
        if (this.token && this.json.sources) {
            for (let srcName in this.json.sources) {
                let src = this.json.sources[srcName];
                if (src.data)
                    src.data = src.data.replace(/\$\{TOKEN\}/g, this.token);
            }
        }
    }
    updateClickable(newLayers, oldLayers) {
        const map = this.getMap();
        newLayers = toArray(newLayers);
        oldLayers = toArray(oldLayers);
        for (let layer of newLayers) {
            const layerIdx = oldLayers.indexOf(layer);
            if (layerIdx === -1) {
                let layerName = `${this.el.id}:${layer}`;
                map.on('click', layerName, this.handlers.click);
                map.on('mouseenter', layerName, this.handlers.mouseenter);
                map.on('mouseleave', layerName, this.handlers.mouseleave);
            }
            else {
                oldLayers.splice(layerIdx, 1);
            }
        }
        for (let layer of oldLayers) {
            let layerName = `${this.el.id}:${layer}`;
            map.off('click', layerName, this.handlers.click);
            map.off('mouseenter', layerName, this.handlers.mouseenter);
            map.off('mouseleave', layerName, this.handlers.mouseleave);
        }
    }
    handleClick(e) {
        this.glFeatureClick.emit(e);
    }
    handleMouseenter() {
        this.getMap().getCanvas().style.cursor = 'pointer';
    }
    handleMouseleave() {
        this.getMap().getCanvas().style.cursor = '';
    }
    static get is() { return "gl-style"; }
    static get properties() { return {
        "basemap": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "basemap",
            "reflect": false,
            "defaultValue": "false"
        },
        "clickableLayers": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string[] | string",
                "resolved": "string | string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "clickable-layers",
            "reflect": false,
            "defaultValue": "[]"
        },
        "enabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "enabled",
            "reflect": false,
            "defaultValue": "true"
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false
        },
        "thumbnail": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "thumbnail",
            "reflect": false
        },
        "token": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "token",
            "reflect": false
        },
        "url": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "url",
            "reflect": false
        },
        "json": {
            "type": "any",
            "mutable": true,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "json",
            "reflect": false,
            "defaultValue": "{}"
        }
    }; }
    static get events() { return [{
            "method": "glFeatureClick",
            "name": "glFeatureClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "glStyleElementAdded",
            "name": "glStyleElementAdded",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "glStyleElementModified",
            "name": "glStyleElementModified",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "glStyleElementRemoved",
            "name": "glStyleElementRemoved",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "clickableLayers",
            "methodName": "updateClickable"
        }]; }
}
