import { h } from '../webmapgl.core.js';

import { a as _t } from './chunk-cf921ba9.js';
import { a as createColorClasses } from './chunk-c82b670d.js';

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 properties() { return {
        "attributeOptions": {
            "type": String,
            "attr": "attribute-options",
            "watchCallbacks": ["parseAttributeOptions"]
        },
        "el": {
            "elementRef": true
        },
        "features": {
            "type": "Any",
            "attr": "features"
        },
        "header": {
            "type": String,
            "attr": "header"
        },
        "headerAttribute": {
            "type": String,
            "attr": "header-attribute"
        },
        "labelPosition": {
            "type": String,
            "attr": "label-position"
        },
        "limit": {
            "type": Number,
            "attr": "limit"
        },
        "valueMaxWidth": {
            "type": String,
            "attr": "value-max-width"
        }
    }; }
    static get style() { return "gl-attribute-values ion-note{font-size:14px;line-height:14px;padding-top:16px;text-align:right}"; }
}

class Note {
    hostData() {
        return {
            class: Object.assign({}, createColorClasses(this.color), { [`${this.mode}`]: true })
        };
    }
    render() {
        return h("slot", null);
    }
    static get is() { return "ion-note"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "color": {
                "type": String,
                "attr": "color"
            },
            "mode": {
                "type": String,
                "attr": "mode"
            }
        };
    }
    static get style() { return ":host{color:var(--color);font-family:var(--ion-font-family,inherit);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600,#666);font-size:14px}"; }
    static get styleMode() { return "md"; }
}

export { AttributeValues as GlAttributeValues, Note as IonNote };
