import { c as n } from "../../chunks/runtime.js";
import { html as i } from "lit-html";
import o from "@geoscene/core/applications/Components/QuantityFormatter.js";
import { LitElement as c, safeClassMap as s } from "@arcgis/lumina";
import { f as l } from "../../chunks/measurementUtils.js";
import { css as m } 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 u = m`:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);animation:geoscene-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.item-disabled{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}.item-value{font-weight:var(--calcite-font-weight-semibold)}.actions{justify-content:center}`, e = {
  error: "error",
  hint: "hint",
  actions: "actions",
  section: "section",
  item: "item",
  itemDisabled: "item-disabled",
  itemTitle: "item-title",
  itemValue: "item-value"
};
class d extends c {
  constructor() {
    super(...arguments), this._formatter = new o(), this.items = [], this.state = "disabled", this.unsupportedLabel = "";
  }
  static {
    this.properties = { hintLabel: 1, items: 0, state: 1, unsupportedLabel: 1 };
  }
  static {
    this.styles = u;
  }
  async load() {
    await this._formatter.when();
  }
  render() {
    switch (this.state) {
      case "unsupported":
        return i`<section class=${s(e.error)}><p>${this.unsupportedLabel}</p></section>`;
      case "measuring":
        return i`<section class=${s(e.hint)}><p>${this.hintLabel}</p></section>`;
      case "ready":
        return i`<div class=${s(e.actions)}><slot name=actions></slot></div>`;
      default:
        return i`<slot name=settings></slot>${h({ formatter: this._formatter, items: this.items })}<div class=${s(e.actions)}><slot name=actions></slot></div>`;
    }
  }
}
function h(t) {
  return i`<section class=${s(e.section)}>${t.items.map((a) => f({ formatter: t.formatter, measurement: a.measurement, title: a.title }))}</section>`;
}
function f(t) {
  const a = t.measurement.state === "available" ? l(t.formatter, t.measurement.value) : null, r = t.measurement.state === "unavailable";
  return i`<div class=${s({
    [e.item]: !0,
    [e.itemDisabled]: r
  })}><span class=${s(e.itemTitle)}>${t.title}</span><span aria-live=polite class=${s(e.itemValue)}>${a ?? "-"}</span></div>`;
}
n("geoscene-measurement-content", d);
export {
  d as GeosceneMeasurementContent
};