import { h } from "@stencil/core";
import { _t } from "../i18n/i18n";
export class AttributeValues {
  constructor() {
    this.options = [];
    this.attributeOptions = undefined;
    this.features = undefined;
    this.header = _t("webmapgl.attribute-values.header");
    this.headerAttribute = undefined;
    this.labelPosition = undefined;
    this.limit = 1;
    this.valueMaxWidth = "200px";
  }
  componentWillLoad() {
    this.parseAttributeOptions();
  }
  /**
   * Converts a format attribute option from a string to the json object we can pass into toLocaleString.
   * If the format is one of the three possible string values, create a specific options object for that.
   */
  parseFormat(format) {
    if (typeof format !== "string")
      return format;
    let parsedFormat;
    try {
      parsedFormat = JSON.parse(format);
    }
    catch (e) {
      if (/SyntaxError/.test(e)) {
        if (["currency", "decimal", "percent"].indexOf(format) !== -1) {
          parsedFormat = {
            style: format,
          };
          if (format === "currency")
            parsedFormat["currency"] = "USD";
        }
      }
      else {
        throw e;
      }
    }
    return parsedFormat;
  }
  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 } }, attr.format
      ? feature.properties[attr.name].toLocaleString({}, this.parseFormat(attr.format))
      : feature.properties[attr.name]))));
  }
  generateOptions(feature) {
    let opts = [];
    for (let prop in feature.properties) {
      opts.push({
        name: prop,
      });
    }
    return opts;
  }
  render() {
    if (this.features == undefined || this.features.length === 0)
      return null;
    let items = [];
    for (let feature of this.features.slice(0, this.limit)) {
      let header = this.headerAttribute != undefined
        ? 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 | attributeOptions[]",
          "resolved": "attributeOptions[] | string",
          "references": {
            "attributeOptions": {
              "location": "local",
              "path": "/var/home/fj44404@co.champaign.il.us/.local/code/webmapgl/src/components/attribute-values/attribute-values.tsx",
              "id": "src/components/attribute-values/attribute-values.tsx::attributeOptions"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "An array of attribute configuration objects, or a stringified version\nof the array. See the section above for option details."
        },
        "attribute": "attribute-options",
        "reflect": false
      },
      "features": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "MapGeoJSONFeature[]",
          "resolved": "MapGeoJSONFeature[]",
          "references": {
            "MapGeoJSONFeature": {
              "location": "import",
              "path": "maplibre-gl",
              "id": ""
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "An array of GeoJSON features for which to display attributes."
        }
      },
      "header": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Header text for the attributes list. It is ignored if `headerAttribute`\nis specified."
        },
        "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": "The name of an attribute that should be displayed in the list header."
        },
        "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": "Position property for `ion-label` elements."
        },
        "attribute": "label-position",
        "reflect": false
      },
      "limit": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Maximum number of features to display."
        },
        "attribute": "limit",
        "reflect": false,
        "defaultValue": "1"
      },
      "valueMaxWidth": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Maximum width of the `ion-note` element used to display attribute values."
        },
        "attribute": "value-max-width",
        "reflect": false,
        "defaultValue": "\"200px\""
      }
    };
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "attributeOptions",
        "methodName": "parseAttributeOptions"
      }];
  }
}
//# sourceMappingURL=attribute-values.js.map
