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.json);
    }
    handleStyleUpdated(e) {
        if (e.detail.id === this.styleId)
            this.update(e.detail.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 properties() { return {
        "el": {
            "elementRef": true
        },
        "image": {
            "type": String,
            "attr": "image"
        },
        "layers": {
            "type": String,
            "attr": "layers"
        },
        "styleId": {
            "type": String,
            "attr": "style-id",
            "watchCallbacks": ["handleStyleId"]
        },
        "toggle": {
            "type": Boolean,
            "attr": "toggle"
        },
        "visible": {
            "state": true
        },
        "widget": {
            "type": String,
            "attr": "widget"
        }
    }; }
    static get listeners() { return [{
            "name": "body:glStyleElementAdded",
            "method": "handleStyleAdded"
        }, {
            "name": "body:glStyleElementModified",
            "method": "handleStyleUpdated"
        }]; }
    static get style() { return "/**style-placeholder:gl-legend-item:**/"; }
}
