import { c as u } from "../../chunks/runtime.js";
import { html as r } from "lit-html";
import { usePropertyChange as w } from "@arcgis/lumina/controllers";
import { classes as v } from "@arcgis/components-utils";
import { when as y, watch as b } from "@geoscene/core/core/reactiveUtils.js";
import f from "@geoscene/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
import { LitElement as $, createEvent as M, noShadowRoot as x, safeClassMap as n, nothing as h, safeStyleMap as R } from "@arcgis/lumina";
import { u as _ } from "../../chunks/useT9n.js";
import { m as B } from "../../chunks/useViewModel.js";
import { H as I } from "../../chunks/heading.js";
import { g as d } from "../../chunks/globalCss.js";
import { c as a } from "../../chunks/basemap-gallery-resources.js";
import { css as L } from "@lit/reactive-element/css-tag.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 */
const D = L`@layer{geoscene-basemap-gallery{display:block}}`, A = B(f), m = {
  // Below this width, items are displayed as a single column and the thumbnail is placed above the title.
  small: 200,
  // Below this width, items are displayed as a single column but with the thumbnail side-by-side
  // with the title. The title is square.
  default: 280,
  // Below this width, items are displayed as in `default`, but the thumbnail has an aspect ratio of 1.5
  // Above this width, items are displayed in a grid.
  wide: 420
};
class C extends $ {
  constructor() {
    super(...arguments), this.messages = _({}), this.viewModel = A(this), this._width = 0, this._state = "", this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = !1, this.headingLevel = 2, this.icon = "basemap", this.label = "", this.position = "bottom-left", this.source = this.viewModel.source, this.state = this.viewModel.state, this.geoscenePropertyChange = w()("activeBasemap", "state"), this.geosceneReady = M();
  }
  static {
    this.properties = { _width: 16, _state: 16, activeBasemap: 1, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, messageOverrides: 0, position: 1, referenceElement: 1, source: 0, state: 3 };
  }
  static {
    this.shadowRootOptions = x;
  }
  static {
    this.styles = D;
  }
  async destroy() {
    await this.manager.destroy();
  }
  loaded() {
    this.manager.onLifecycle(() => [
      y(() => this.source, () => {
        this.viewModel.loadSource();
      }, { sync: !0, initial: !0 }),
      b(() => this.source.state, () => {
        this._state = this.source.state;
      }, { sync: !0 })
    ]);
    const s = new ResizeObserver((o) => {
      for (const t of o)
        this._width = t.contentRect.width;
    }), e = this.el.childElem;
    e && s.observe(e);
  }
  _getRoundRobinIndex(s, e) {
    return (s + e) % e;
  }
  _handleKeyDown(s) {
    const { key: e } = s;
    if (!["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"].includes(e))
      return;
    s.preventDefault();
    const { items: t, activeBasemapIndex: i } = this.viewModel, c = e === "ArrowUp" || e === "ArrowLeft" ? this._getRoundRobinIndex(Math.max(i - 1, -1), t.length) : this._getRoundRobinIndex(i + 1, t.length), l = t.at(c);
    l?.state === "ready" && (this.viewModel.activeBasemap = l.basemap);
  }
  render() {
    const s = this.source.state === "loading", e = this.disabled || this.state === "disabled", o = this.viewModel.items, t = {
      [a.sourceLoading]: s,
      [d.disabled]: e,
      "geoscene-component": !0
      // For compatibility with GeoScene View UI
    }, i = this._width;
    i <= m.small || i >= m.wide ? t[a.layoutGrid] = !0 : i < m.default && (t[a.narrowItems] = !0);
    const c = s ? r`<div class=${n(a.loader)}></div>` : null, l = s ? null : o.length > 0 ? r`<div aria-disabled=${this.disabled ?? h} aria-label=${this.label ?? h} class=${n(a.itemContainer)} @keydown=${this._handleKeyDown} role=radiogroup>${o.map((p, g) => r`<geoscene-basemap-gallery-item .disabled=${e} .item=${p} .itemIndex=${g} .viewModel=${this.viewModel} .messages=${this.messages}></geoscene-basemap-gallery-item>`)}</div>` : r`<div class=${n(d.empty)}>${I({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
    return r`<div class=${n(v(a.base, d.widget, d.panel, t))} style=${R({
      "--geoscene-basemap-gallery-small": `${m.small}px`
    })}>${[c, l]}</div>`;
  }
}
u("geoscene-basemap-gallery", C);
export {
  C as GeosceneBasemapGallery
};