import { Component, Host, h, Prop } from '@stencil/core';
export class TeliaPrice {
  constructor() {
    /** Allows the size of the rendered price to be increased to a larger, more prominent style */
    this.largePrice = false;
    this.dataTrackingId = 'telia-price';
    /**
     * These different unicodes are used both for esthetic
     * and practical reasons. JSX strips leading spaces by default.
     * Rendering the different parts of the price with correct
     * spacing is more easily achieved when we can insert a space
     * before a part, rather than after.
     */
    this.thinnerSpace = '\u2006';
    this.mediumSpace = '\u2005';
    this.widerSpace = '\u2004';
    this.priceLine = () => {
      // adds a space before periodicity if there is no '/' in the periodicity text
      let periodicity = this.periodicity;
      if (this.periodicity && !this.periodicity.includes('/')) {
        periodicity = ` ${this.periodicity}`;
      }
      const Tag = this.fullPrice ? 'ins' : 'span';
      const priceClasses = {
        ['telia-price__price']: true,
        [`telia-price__price--large`]: !!this.largePrice,
      };
      return (h("telia-p", null,
        h("span", { role: 'text' },
          this.startingAt && this.startingAt.concat(' '),
          h("strong", { class: "telia-price__strong" },
            h(Tag, { class: priceClasses },
              this.renderPrice(this.price, this.currency),
              periodicity)),
          this.fullPrice && (h("del", { class: "telia-price__full-price" },
            this.widerSpace,
            "(",
            this.priceWithCurrency(this.fullPrice, this.currency),
            ")")))));
    };
    this.termsLine = () => {
      if (!this.terms) {
        return null;
      }
      const Tag = this.termsFullPrice ? 'ins' : 'span';
      return (h("telia-p", null,
        h("span", { role: 'text' },
          this.terms,
          this.termsPrice && (h(Tag, { class: "telia-price__price" },
            this.mediumSpace,
            this.priceWithCurrency(this.termsPrice, this.currency))),
          this.termsFullPrice && (h("del", { class: "telia-price__full-price" },
            this.widerSpace,
            "(",
            this.priceWithCurrency(this.termsFullPrice, this.currency),
            ")")))));
    };
  }
  /**
   * This utility is used both for the 'price'
   * property and optional props as 'full price' and
   * 'terms-price'. Therefore it renders nothing
   * if the price is not truthy. This allows us
   * to use it even though the passed price
   * may be falsy (empty string for instance).
   */
  priceWithCurrency(price, currency) {
    if (price) {
      return [price, currency].join(this.thinnerSpace);
    }
  }
  renderPrice(price, currency) {
    if (price) {
      return [
        h("span", { class: "telia-price__value" }, price),
        this.thinnerSpace,
        currency,
      ];
    }
  }
  render() {
    return (h(Host, { class: "telia-price" },
      h("telia-vst", { dataTrackingId: this.dataTrackingId }),
      this.priceLine(),
      this.termsLine()));
  }
  static get is() { return "telia-price"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-price.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-price.css"]
  }; }
  static get properties() { return {
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "currency": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets the currency for all prices"
      },
      "attribute": "currency",
      "reflect": false
    },
    "price": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets the price"
      },
      "attribute": "price",
      "reflect": false
    },
    "periodicity": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets the periodicity, for example \"per month\", of the given price. Does not apply to any price\nin the \"terms\" section"
      },
      "attribute": "periodicity",
      "reflect": false
    },
    "fullPrice": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets the price before any discounts. This price, together with the currency, will be\npresented within parenthesis. For clarity, please write the price like \"Down from 39,90\" or\n\"Previously 39,90\", but in the customer's language of course."
      },
      "attribute": "full-price",
      "reflect": false
    },
    "startingAt": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If given, this property is shown before the price. Intended use case is a \"starting at\" or\n\"from\" text to indicate that there may be higher prices for this product"
      },
      "attribute": "starting-at",
      "reflect": false
    },
    "terms": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies any terms related to the price, such as \"minimum 12 month contract\" or\nsimilar. This is presented below the price"
      },
      "attribute": "terms",
      "reflect": false
    },
    "termsPrice": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Presents the price related to the terms. Currency is added to the end"
      },
      "attribute": "terms-price",
      "reflect": false
    },
    "termsFullPrice": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Presents the price related to the terms before any discounts. This price,\ntogether with the currency, will be presented within parenthesis. For clarity,\nplease write the price like \"Down from 39,90\" or\n\"Previously 39,90\", but in the customer's language of course."
      },
      "attribute": "terms-full-price",
      "reflect": false
    },
    "largePrice": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Allows the size of the rendered price to be increased to a larger, more prominent style"
      },
      "attribute": "large-price",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
}
