import { h, Host, getAssetPath } from '@stencil/core';
const iconCache = {};
const requestCache = {};
async function fetchIcon(icon) {
  var _a, _b, _c;
  const faPrefixes = ['fa-', 'fas-', 'fas ', 'fab-', 'fab '];
  const iconName = icon.replace(new RegExp('\\b(' + faPrefixes.join('|') + ')\\b', 'gi'), '');
  const iconStyle = (icon.indexOf('fab ') > -1 || icon.indexOf('fab-')) > -1 ? 'solid' : 'regular';
  // if we have a cached icon already...use the cache!
  if (iconCache[iconName]) {
    return (_b = (_a = iconCache[iconName]) === null || _a === void 0 ? void 0 : _a.svg) === null || _b === void 0 ? void 0 : _b[iconStyle];
  }
  // check for active icon requests to make sure we don't send multiple icon fetch requests
  if (!requestCache[iconName]) {
    requestCache[iconName] = fetch(getAssetPath(`./icons/fontawesome/${iconName}.json`))
      .then(resp => resp.json())
      .catch(() => {
      console.error(`Icon was not found: ${icon}`);
      return null;
    });
  }
  // when the fetch completes, update the cache
  const iconDetails = await requestCache[iconName];
  iconCache[iconName] = iconDetails;
  // return the specific icon style requested
  return (_c = iconDetails === null || iconDetails === void 0 ? void 0 : iconDetails.svg) === null || _c === void 0 ? void 0 : _c[iconStyle];
}
export class BsIcon {
  constructor() {
    this.icon = undefined;
    this.size = 16;
    this.loadOnScrollTo = true;
    this.scrollMargin = '50px';
    this.iconDetails = undefined;
    this.visible = false;
  }
  connectedCallback() {
    this.waitUntilCanLoad(() => {
      this.visible = true;
      this.loadIcon();
    });
  }
  disconnectedCallback() {
    // if we have an active intersection observer, remove it
    if (this._intersectionObserver) {
      this._intersectionObserver.disconnect();
      this._intersectionObserver = null;
    }
  }
  componentWillLoad() {
    this.loadIcon();
  }
  async loadIcon() {
    if (!this.icon || !this.visible) {
      // not ready to load the icon yet
      return;
    }
    this.iconDetails = await fetchIcon(this.icon);
  }
  render() {
    return (h(Host, null, h("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", fill: "currentColor", viewBox: this.iconDetails ? this.iconDetails.viewBox.join(' ') : '0 0 16 16', width: this.size, height: this.size }, h("path", { d: this.iconDetails ? this.iconDetails.path : '' }))));
  }
  waitUntilCanLoad(callback) {
    const supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window;
    // load the icon immediately if needed
    if (!supportsIntersectionObserver || !this.loadOnScrollTo) {
      callback();
      return;
    }
    // load the icon when the user scrolls to it
    this._intersectionObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this._intersectionObserver.disconnect();
          this._intersectionObserver = null;
          callback();
        }
      });
    }, {
      rootMargin: this.scrollMargin,
    });
    this._intersectionObserver.observe(this.el);
  }
  static get is() { return "bs-icon"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-icon.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-icon.css"]
    };
  }
  static get assetsDirs() { return ["icons"]; }
  static get properties() {
    return {
      "icon": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "icon",
        "reflect": false
      },
      "size": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "size",
        "reflect": false,
        "defaultValue": "16"
      },
      "loadOnScrollTo": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "load-on-scroll-to",
        "reflect": false,
        "defaultValue": "true"
      },
      "scrollMargin": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "scroll-margin",
        "reflect": false,
        "defaultValue": "'50px'"
      }
    };
  }
  static get states() {
    return {
      "iconDetails": {},
      "visible": {}
    };
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "icon",
        "methodName": "loadIcon"
      }];
  }
}
//# sourceMappingURL=bs-icon.js.map
