import { Component, Host, h, Prop, getAssetPath, Watch, Build, State } from '@stencil/core';
import { getSvgContent, uxpliconContent } from './cache';
export class UxplIcon {
  connectedCallback() {
    // purposely do not return the promise here because loading
    // the svg file should not hold up loading the app
    // only load the svg if it's visible
    if (this.url) {
      this.loadIconUrl();
    }
    if (this.icon) {
      this.loadIconPack();
    }
  }
  loadIconUrl() {
    if (Build.isBrowser) {
      if (this.url) {
        if (uxpliconContent.has(this.url)) {
          // sync if it's already loaded
          this.svgContent = uxpliconContent.get(this.url);
        }
        else {
          // async if it hasn't been loaded
          getSvgContent(this.url).then(() => this.svgContent = uxpliconContent.get(this.url));
        }
      }
    }
  }
  loadIconPack() {
    if (this.icon && this.icon.length > 0) {
      const url = getAssetPath('assets/uxpl.icons.svg');
      if (Build.isBrowser) {
        let spritePack;
        if (uxpliconContent.has(url)) {
          // sync if it's already loaded
          spritePack = uxpliconContent.get(url);
          this.svgContent = this.extractIconFromSprite(this.icon, spritePack);
          ;
        }
        else {
          // async if it hasn't been loaded
          getSvgContent(url).then(() => {
            this.svgContent = this.extractIconFromSprite(this.icon, uxpliconContent.get(url));
            ;
          });
        }
      }
    }
  }
  extractIconFromSprite(name, sprites) {
    const parser = new DOMParser();
    const sprite = parser.parseFromString(sprites, 'text/xml');
    const spriteElement = sprite.getElementById(name);
    return spriteElement ? spriteElement.outerHTML : '';
  }
  render() {
    if (this.size) {
      return (h(Host, { class: "font-sizing", style: {
          display: 'block',
          width: '1em',
          height: '1em',
          contain: 'strict',
          fill: 'currentColor',
          boxSizing: 'content-box !important',
          fontSize: this.size
        } },
        h("div", { part: "content", class: "icon-inner", style: { color: this.color }, innerHTML: this.svgContent })));
    }
    else {
      return (h(Host, null, this.icon ?
        h("div", null,
          h("svg", { part: "content", style: {
              width: this.width,
              height: this.height,
              color: this.color
            }, role: "img" },
            h("use", { xlinkHref: getAssetPath('assets/uxpl.icons.svg') + '#' + this.icon })),
          h("slot", null))
        :
          h("div", { part: "content", style: { width: this.width, height: this.height, color: this.color }, innerHTML: this.svgContent },
            h("slot", null))));
    }
  }
  static get is() { return "uxpl-icon"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-icon.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-icon.css"]
  }; }
  static get assetsDirs() { return ["assets"]; }
  static get properties() { return {
    "url": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "url",
      "reflect": false
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "icon",
      "reflect": false
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "height": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "height",
      "reflect": false
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "color",
      "reflect": false
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "size",
      "reflect": false
    }
  }; }
  static get states() { return {
    "svgContent": {}
  }; }
  static get watchers() { return [{
      "propName": "url",
      "methodName": "loadIconUrl"
    }, {
      "propName": "icon",
      "methodName": "loadIconPack"
    }]; }
}
