import { r, c as s, h as n, H as c } from "./reactcomponent-44b70bf6.mjs";
import { m as d } from "./icon-b8d01d6f-ddfa2c17.mjs";
import { b as a } from "./utils-ae714467-b07fc3be.mjs";
import "react";
import "react-dom";
const l = 'html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{padding:16px;font-size:1rem;font-weight:500;line-height:1rem;transition:300ms ease;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";border-radius:8px;background-color:#f9fafb;display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:16px;border:1px solid #e5e7eb}:host(:hover),:host(.hovered){background-color:var(--tailwind-colors-gray-200);border:1px solid #d1d5db}.img-container{width:32px;height:32px;display:flex;justify-content:center;align-items:center}img{border-radius:8px;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.details{padding-right:16px;flex:1;display:grid;gap:4px}.details-title{margin:0;padding:0}.distance{font-weight:400}mi-location-info{color:#6b7280}', h = class {
  constructor(e) {
    r(this, e), this.locationClicked = s(this, "locationClicked", 7), this.listItemDidRender = s(this, "listItemDidRender", 7), this.iconDisplaySize = parseInt(d.icon.size.medium.value), this.location = void 0, this.showExternalId = !0, this.unit = void 0, this.icon = void 0, this.level = "Level", this.iconBadge = void 0, this.iconBadgeValue = void 0, this.iconURLToRender = void 0;
  }
  iconChanged() {
    var e;
    this.iconURLToRender = this.icon ? this.icon : (e = this.location) === null || e === void 0 ? void 0 : e.properties.imageURL, this.updateBadge();
  }
  iconBadgeChanged() {
    this.updateBadge();
  }
  iconBadgeValueChanged() {
    this.updateBadge();
  }
  /**
   * @description Emits the location to event listeners.
   * @param {*} location - Location object.
   * @memberof List
   */
  locationClickedHandler(e) {
    this.locationClicked.emit(e);
  }
  /**
   * Called once just after the component is first connected to the DOM.
   */
  componentWillLoad() {
    var e;
    this.iconURLToRender = this.icon ? this.icon : (e = this.location) === null || e === void 0 ? void 0 : e.properties.imageURL, this.updateBadge();
  }
  /**
   * Called after every render().
   */
  componentDidRender() {
    this.location && (this.infoElement.location = this.location, this.listItemDidRender.emit(), this.imageElement && !("objectFit" in document.documentElement.style) && this.objectFitImage(this.imageElement));
  }
  /**
   * Apply badge to location icon.
   */
  updateBadge() {
    this.iconBadge && this.iconBadgeValue && this.iconURLToRender && this.applyBadgeToIcon();
  }
  /**
   * @description Set image as background image.
   * @param {HTMLImageElement} image
   */
  objectFitImage(e) {
    e.setAttribute("style", `background: no-repeat center center url("${this.iconURLToRender}"); background-size: cover;`), e.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${e.width}' height='${e.height}'%3E%3C/svg%3E`;
  }
  /**
   * Apply badge to location icon.
   * Will make the original icon appear the intended size even though the badge exceeds its bounds.
   */
  applyBadgeToIcon() {
    let e;
    this.iconURLToRender = this.icon ? this.icon : this.location.properties.imageURL;
    const t = a(this.iconURLToRender, this.iconDisplaySize);
    this.getImageFromUrl(t).then((i) => {
      switch (e = i.width / 24, this.iconBadge.toLowerCase()) {
        case "availability":
          if (this.iconBadgeValue === "true")
            return mapsindoors.BadgeRenderer.AvailableBadge.overlay(i);
          if (this.iconBadgeValue === "false")
            return mapsindoors.BadgeRenderer.UnavailableBadge.overlay(i);
          break;
        case "occupancy":
          return mapsindoors.BadgeRenderer.TextBadge.overlay(i, {
            text: this.iconBadgeValue.toString()
          });
      }
    }).then((i) => {
      if (i) {
        this.iconURLToRender = i.src;
        const o = (i.width - 24) / -2;
        this.iconAttributes = {
          style: {
            transform: "translateX(" + o + "px)",
            width: i.width / e + "px",
            height: i.height / e + "px"
          }
        };
      }
    });
  }
  /**
   * Create and return an Image from URL.
   *
   * @param {string} url
   * @returns {Image}
   */
  async getImageFromUrl(e) {
    return fetch(e).then((t) => t.blob()).then((t) => URL.createObjectURL(t)).then((t) => new Promise((i) => {
      const o = new Image();
      o.width = this.iconDisplaySize, o.height = this.iconDisplaySize, o.onload = () => i(o), o.onerror = () => i(null), o.src = t;
    }));
  }
  /**
   * Render location list-item.
   *
   * @description Render location list-item.
   * @returns {JSX.Element}
   */
  render() {
    return this.location && n(c, { role: "listitem", onClick: () => this.locationClickedHandler(this.location) }, this.iconURLToRender ? this.renderIcon() : null, n("div", { class: "details" }, n("p", { class: "details-title" }, this.location.properties.name), n("mi-location-info", { level: this.level, ref: (e) => this.infoElement = e, showExternalId: this.showExternalId })), this.location.properties.geodesicDistance && this.renderDistance());
  }
  /**
   * @description Get JSX template for icon.
   * @returns {JSX.Element}
   */
  renderIcon() {
    const e = a(this.iconURLToRender, this.iconDisplaySize);
    return n("div", { class: "img-container" }, n("img", Object.assign({}, this.iconAttributes, { ref: (t) => this.imageElement = t, src: e })));
  }
  /**
   * @description Get JSX template for distance.
   * @returns {JSX.Element}
   */
  renderDistance() {
    return n("div", { class: "distance" }, n("mi-distance", { meters: this.location.properties.geodesicDistance, unit: this.unit }));
  }
  static get watchers() {
    return {
      icon: ["iconChanged"],
      iconBadge: ["iconBadgeChanged"],
      iconBadgeValue: ["iconBadgeValueChanged"]
    };
  }
};
h.style = l;
export {
  h as mi_list_item_location
};
//# sourceMappingURL=mi-list-item-location.entry-f4ab6651.mjs.map
