import { h } from '@stencil/core';
import { toArray } from '../utils';
export class LegendItem {
    constructor() {
        this.toggle = false;
        this.widget = 'item';
    }
    async componentWillLoad() {
        this.handleStyleId();
    }
    async handleStyleId() {
        let styleEl = await this.getStyle();
        if (styleEl)
            this.update(styleEl.json);
    }
    handleStyleAdded(e) {
        if (e.detail.id === this.styleId)
            this.update(e.detail.style.json);
    }
    handleStyleUpdated(e) {
        if (e.detail.id === this.styleId)
            this.update(e.detail.style.json);
    }
    async getStyle() {
        let styleEl = document.querySelector(`gl-style#${this.styleId}`);
        if (styleEl)
            await styleEl.componentOnReady();
        return styleEl;
    }
    getVisible(json) {
        const layers = toArray(this.layers);
        if (!layers || !layers.length)
            return true;
        if (!json.layers || !json.layers.length)
            return false;
        for (let layer of json.layers) {
            if (layers.indexOf(layer.id) !== -1) {
                if (!layer.layout)
                    return true;
                return layer.layout.visibility !== 'none';
            }
        }
    }
    async setVisible(visible) {
        if (this.visible === visible)
            return;
        let layers = toArray(this.layers);
        let styleEl = await this.getStyle();
        if (!styleEl)
            return;
        let json = Object.assign({}, styleEl.json);
        json.layers = (json.layers || []).map((layer) => {
            if (layers.indexOf(layer.id) !== -1) {
                layer.layout = layer.layout || {};
                layer.layout.visibility = (visible) ? 'visible' : 'none';
            }
            return layer;
        });
        styleEl.json = json;
    }
    update(json) {
        if (json)
            this.visible = this.getVisible(json);
    }
    render() {
        let content = [];
        if (this.image)
            content.push(h("ion-thumbnail", { slot: "start" },
                h("img", { src: this.image, alt: this.el.textContent })));
        content.push(h("ion-label", null,
            h("slot", null)));
        if (this.toggle)
            content.push(h("ion-toggle", { slot: "end", checked: this.visible, onIonChange: (e) => this.setVisible(e.detail.checked) }));
        if (this.widget === 'divider')
            return (h("ion-item-divider", null, content));
        return (h("ion-item", null, content));
    }
    static get is() { return "gl-legend-item"; }
    static get originalStyleUrls() { return {
        "$": ["legend-item.css"]
    }; }
    static get styleUrls() { return {
        "$": ["legend-item.css"]
    }; }
    static get properties() { return {
        "layers": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | string[]",
                "resolved": "string | string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "layers",
            "reflect": false
        },
        "image": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "image",
            "reflect": false
        },
        "toggle": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "toggle",
            "reflect": false,
            "defaultValue": "false"
        },
        "styleId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "style-id",
            "reflect": false
        },
        "widget": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'divider' | 'item'",
                "resolved": "\"divider\" | \"item\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "widget",
            "reflect": false,
            "defaultValue": "'item'"
        }
    }; }
    static get states() { return {
        "visible": {}
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "styleId",
            "methodName": "handleStyleId"
        }]; }
    static get listeners() { return [{
            "name": "glStyleElementAdded",
            "method": "handleStyleAdded",
            "target": "body",
            "capture": false,
            "passive": false
        }, {
            "name": "glStyleElementModified",
            "method": "handleStyleUpdated",
            "target": "body",
            "capture": false,
            "passive": false
        }]; }
}
