import { Component, Prop, h, Host } from '@stencil/core';
import camelToKebabCase from '../../utils/camelToKebabCase';
import { FooterPartner } from '../../types/FooterPartner';
export class TeliaFooterPartners {
  constructor() {
    /**
     * List of partner logos to show. Provided either as an array of FooterPartner, or a stringified
     * representation of the same.
     */
    this.partners = [];
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-footer-partners';
    this.componentClass = 'telia-footer-partners';
    this.assetServer = 'https://cdn.voca.teliacompany.com/logo/';
    this.logos = {
      [FooterPartner.TeliaFinance]: 'Telia-finance-white.svg',
      [FooterPartner.Mastercard]: 'Mastercard.svg',
      [FooterPartner.Visa]: 'Visa-white.svg',
      [FooterPartner.Klarna]: 'Klarna-white.svg',
      [FooterPartner.Swish]: 'Swish-white.svg',
    };
  }
  getPartners() {
    let localPartners;
    if (typeof this.partners === 'object') {
      localPartners = this.partners;
    }
    else {
      localPartners = JSON.parse(this.partners);
    }
    return localPartners;
  }
  getImage(key) {
    const classes = {
      [`${this.componentClass}__image`]: true,
      [`${this.componentClass}__image--${camelToKebabCase(key)}`]: true,
    };
    return (h("img", { class: classes, src: `${this.assetServer}${this.logos[key]}`, alt: this.getAltOrEmptyString(key), role: "img" }));
  }
  getAltOrEmptyString(key) {
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (!this.__altTexts || !this.__altTexts[key]) {
      return '';
    }
    return this.__altTexts[key];
  }
  /**
   * To avoid calling JSON.parse() on each
   * iteration of the loop that renders each
   * partner, this is a rudmentary cache for the
   * alt texts for the partner logos. It
   * is run on each render, for simplicity.
   */
  updateAltTextCache(value) {
    if (!value)
      return;
    let localAltTexts;
    if (typeof value === 'object') {
      localAltTexts = value;
    }
    else {
      localAltTexts = JSON.parse(value);
    }
    this.__altTexts = localAltTexts;
  }
  componentWillRender() {
    this.updateAltTextCache(this.altTexts);
  }
  render() {
    const partners = this.getPartners();
    return (h(Host, { "data-testid": this.dataTestid },
      h("telia-vst", { dataTrackingId: this.dataTrackingId }),
      partners.length && (h("ul", { class: `${this.componentClass}__list` }, partners.map(key => !!this.logos[key] && (h("li", { class: `${this.componentClass}__list-item` }, this.getImage(key))))))));
  }
  static get is() { return "telia-footer-partners"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-footer-partners.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-footer-partners.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
    },
    "partners": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "FooterPartnerType[] | string",
        "resolved": "FooterPartnerType[] | string",
        "references": {
          "FooterPartnerType": {
            "location": "import",
            "path": "../../types/FooterPartner"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "List of partner logos to show. Provided either as an array of FooterPartner, or a stringified\nrepresentation of the same."
      },
      "attribute": "partners",
      "reflect": false,
      "defaultValue": "[]"
    },
    "altTexts": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "FooterPartnerAltTexts | string",
        "resolved": "string | { teliaFinance: string; mastercard: string; visa: string; klarna: string; swish: string; }",
        "references": {
          "FooterPartnerAltTexts": {
            "location": "import",
            "path": "../../types/FooterPartnerAltTexts"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Alt text for each partner passed in the @partners property. Provided as an object FooterPartnerAltTexts\nor a stringified representation of the same."
      },
      "attribute": "alt-texts",
      "reflect": false
    }
  }; }
}
