import { Component, Host, h, Prop } from '@stencil/core';
import createSvg from '../../utils/createSvg';
import getSvgContent from '../../utils/getSvgContent';
import * as Pictograms from '@teliads/pictograms';
export class TeliaPictogram {
  constructor() {
    /** Describe unclear pictogram context for better accessibility support */
    this.allyTitle = 'Pictogram';
    /** Pictograms bundle from `@teliads/pictograms` */
    this.pictogramsBundle = Object.values(Pictograms);
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-pictogram';
  }
  /**
   * Returns true if property is not `undefined`, `null` and empty
   * @private
   * @returns `boolean`
   */
  isPropertySet(property) {
    return property && property.trim() !== '';
  }
  /**
   * Returns size class if `size` property is set
   * @private
   * @returns `string`
   */
  getSizeClass() {
    return this.isPropertySet(this.size) ? `telia-pictogram--${this.size}` : '';
  }
  /**
   * Returns required attributes for svg
   * @private
   * @returns `{name: string, value: string}[]`
   */
  getSvgAttributes() {
    let svgAttributes = [{ name: 'viewBox', value: '0 0 64 64' }];
    // If title is defined, title is linked to svg. Otherwise svg is hidden from screen readers.
    return this.allyTitle
      ? [...svgAttributes, { name: 'role', value: 'img' }]
      : [...svgAttributes, { name: 'aria-hidden', value: 'true' }];
  }
  /**
   * Returns svg string from svg property or svg from `@teliads/pictograms` by name
   * @private
   * @returns `string`
   */
  getSvgAsString() {
    if (this.isPropertySet(this.svg)) {
      return this.svg;
    }
    if (this.isPropertySet(this.name)) {
      const pictogram = this.pictogramsBundle.filter(pic => pic.name === this.name);
      if (pictogram && pictogram.length > 0) {
        return pictogram[0].svg;
      }
    }
    return '';
  }
  render() {
    const svgHtml = createSvg({
      content: getSvgContent(this.getSvgAsString()),
      attributes: this.getSvgAttributes(),
      title: this.allyTitle,
    });
    return (h(Host, { class: `telia-pictogram ${this.getSizeClass()}` },
      h("span", { "aria-label": this.allyTitle, class: "telia-pictogram__container", innerHTML: svgHtml }),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get is() { return "telia-pictogram"; }
  static get originalStyleUrls() { return {
    "$": ["telia-pictogram.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-pictogram.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "PictogramProps['name']",
        "resolved": "\"c-more\" | \"discovery-plus\" | \"eurosport-player\" | \"flipp\" | \"hbo-max\" | \"id-protection\" | \"ms-office-365\" | \"netflix\" | \"readly\" | \"safety-bundle\" | \"spotify\" | \"storytel\" | \"streaming\" | \"telia-add-number\" | \"telia-broadband\" | \"telia-cloud\" | \"telia-email\" | \"telia-insurance\" | \"telia-landline\" | \"telia-mobile-broadband\" | \"telia-mobile-phone\" | \"telia-secure\" | \"telia-sim-card\" | \"telia-smart-wifi-plus\" | \"telia-touchpoint\" | \"telia-trygg-surf\" | \"telia-TV\" | \"tv2-play\" | \"xbox\"",
        "references": {
          "PictogramProps": {
            "location": "import",
            "path": "../../types/PictogramProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Pictogram rendered by provided name (Available names defined in `@teliads/pictograms/dist/main/Pictograms`)"
      },
      "attribute": "name",
      "reflect": false
    },
    "svg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "PictogramProps['svg']",
        "resolved": "string",
        "references": {
          "PictogramProps": {
            "location": "import",
            "path": "../../types/PictogramProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Svg string used for tree-shakable pictogram rendering"
      },
      "attribute": "svg",
      "reflect": false
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "PictogramProps['size']",
        "resolved": "\"md\" | \"sm\"",
        "references": {
          "PictogramProps": {
            "location": "import",
            "path": "../../types/PictogramProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Pictogram predefined size (`sm` = 32x32  | `md` = 64x64)"
      },
      "attribute": "size",
      "reflect": false
    },
    "allyTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "PictogramProps['allyTitle']",
        "resolved": "string",
        "references": {
          "PictogramProps": {
            "location": "import",
            "path": "../../types/PictogramProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Describe unclear pictogram context for better accessibility support"
      },
      "attribute": "ally-title",
      "reflect": false,
      "defaultValue": "'Pictogram'"
    },
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "PictogramProps['dataTestid']",
        "resolved": "string",
        "references": {
          "PictogramProps": {
            "location": "import",
            "path": "../../types/PictogramProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    }
  }; }
}
