import { h } from '@stencil/core';
import { _t } from '../i18n/i18n';
export class AttributeValues {
    constructor() {
        this.options = [];
        this.header = _t('webmapgl.attribute-values.header');
        this.limit = 1;
        this.valueMaxWidth = '200px';
    }
    componentWillLoad() {
        this.parseAttributeOptions();
    }
    parseAttributeOptions() {
        this.options = (typeof this.attributeOptions === 'string') ?
            JSON.parse(this.attributeOptions) : this.attributeOptions;
    }
    getItemsForFeature(feature, options) {
        return options
            .filter((attr) => attr.name != this.headerAttribute
            && feature.properties[attr.name] !== undefined)
            .map((attr) => (h("ion-item", null,
            h("ion-label", { position: this.labelPosition }, attr.alias || attr.name),
            h("ion-note", { slot: (this.labelPosition != 'stacked') ? 'end' : null, "text-wrap": true, style: { 'max-width': this.valueMaxWidth } }, feature.properties[attr.name]))));
    }
    generateOptions(feature) {
        let opts = [];
        for (let prop in feature.properties) {
            opts.push({
                name: prop
            });
        }
        return opts;
    }
    render() {
        if (!this.features || !this.features.length)
            return null;
        let items = [];
        for (let feature of this.features.slice(0, this.limit)) {
            let header = (this.headerAttribute) ?
                feature.properties[this.headerAttribute] : this.header;
            items.push(h("ion-item-divider", null,
                h("ion-label", null, header)));
            let featureOpts = this.options || this.generateOptions(feature);
            Array.prototype.push.apply(items, this.getItemsForFeature(feature, featureOpts));
        }
        return (h("ion-list", null, items));
    }
    static get is() { return "gl-attribute-values"; }
    static get originalStyleUrls() { return {
        "$": ["attribute-values.css"]
    }; }
    static get styleUrls() { return {
        "$": ["attribute-values.css"]
    }; }
    static get properties() { return {
        "attributeOptions": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | any[]",
                "resolved": "any[] | string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "attribute-options",
            "reflect": false
        },
        "features": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "any[]",
                "resolved": "any[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "header": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "header",
            "reflect": false,
            "defaultValue": "_t('webmapgl.attribute-values.header')"
        },
        "headerAttribute": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "header-attribute",
            "reflect": false
        },
        "labelPosition": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'fixed' | 'floating' | 'stacked'",
                "resolved": "\"fixed\" | \"floating\" | \"stacked\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-position",
            "reflect": false
        },
        "limit": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "limit",
            "reflect": false,
            "defaultValue": "1"
        },
        "valueMaxWidth": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value-max-width",
            "reflect": false,
            "defaultValue": "'200px'"
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "attributeOptions",
            "methodName": "parseAttributeOptions"
        }]; }
}
