import { g as y, c as I } from "../../chunks/runtime.js";
import { classes as B } from "@arcgis/components-utils";
import { watch as g } from "@geoscene/core/core/reactiveUtils.js";
import { LitElement as w, noShadowRoot as C, nothing as r, safeClassMap as s } from "@arcgis/lumina";
import { html as l } from "lit-html";
import { g as x } from "../../chunks/globalCss.js";
import { c as i } from "../../chunks/basemap-gallery-resources.js";
import { g as A } from "../../chunks/component-utils.js";
/*! All material copyright GeoScene, All Rights Reserved, unless otherwise specified.
See https://js.geoscene.cn/4.33/geoscene/copyright.txt for details.
v4.33.18 */
function _(e) {
  return e.portalItem?.type === "Web Scene" || e.referenceLayers.some((t) => t.type === "scene");
}
function S(e) {
  return !!e?.portalItem?.tags?.some((t) => t.toLowerCase() === "beta");
}
class T extends w {
  constructor() {
    super(...arguments), this._itemState = "loading", this._isActive = !1;
  }
  static {
    this.properties = { _itemState: 16, _isActive: 16, disabled: 5, item: 0, itemIndex: 9, viewModel: 0, messages: 0 };
  }
  static {
    this.shadowRootOptions = C;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      g(() => this.item.state, (t) => {
        this._itemState = t;
      }, { sync: !0 }),
      g(() => this.viewModel.activeBasemap, (t) => {
        this._isActive = this.item.basemap.id === t?.id, this._isActive && (A(this)?.focus(), this.el.scrollIntoView({ block: "nearest" }));
      }, { initial: !0, sync: !0 })
    ]);
  }
  render() {
    const { disabled: t, item: a, itemIndex: o, viewModel: c, messages: h } = this, u = a.basemap.thumbnailUrl || y("assets/basemap-gallery/images/basemap-toggle-64.svg"), m = a.basemap.title, b = a.basemap.portalItem?.snippet, $ = a.error?.message || b || m, { activeBasemapIndex: p } = c, n = p === o, f = n || p === -1 && o === 0 ? 0 : -1, v = {
      [i.selectedItem]: n,
      [i.itemError]: a.state === "error"
    }, d = `basemapgallery-item-${a.uid}`;
    return l`<div .ariaChecked=${n} .ariaDisabled=${t} aria-labelledby=${d ?? r} class=${s(B(i.item, v))} role=radio tabindex=${f ?? r} title=${$ ?? r} @click=${() => {
      a.state === "ready" && (c.activeBasemap = a.basemap);
    }}><img alt class=${s(i.itemThumbnail)} src=${u ?? r}><div class=${s(i.itemContent)}><div class=${s(i.itemTitle)}><span id=${d ?? r}>${m}</span></div>${_(a.basemap) ? D(a.basemap, h) : null}</div>${a.state !== "loading" ? null : l`<calcite-scrim><span aria-hidden=true class=${s(x.loaderAnimation)} role=presentation></span></calcite-scrim>`}</div>`;
  }
}
function D(e, t) {
  return l`<div class=${s(i.itemTagsContainer)}>${L(t)}${S(e) ? M(t) : null}</div>`;
}
function L(e) {
  return l`<calcite-chip scale=s .label=${e.tag3D}>${e.tag3D}</calcite-chip>`;
}
function M(e) {
  return l`<calcite-chip appearance=outline-fill scale=s .label=${e.tagBeta}>${e.tagBeta}</calcite-chip>`;
}
I("geoscene-basemap-gallery-item", T);
export {
  T as GeosceneBasemapGalleryItem
};