import { c as C } from "../../chunks/runtime.js";
import { ref as g } from "lit-html/directives/ref.js";
import { html as u } from "lit-html";
import { classes as d } from "@arcgis/components-utils";
import { getDefaultUnitForView as w } from "@geoscene/core/applications/Components/getDefaultUnits.js";
import { watch as y } from "@geoscene/core/core/reactiveUtils.js";
import { formatNumber as S } from "@geoscene/core/intl.js";
import L from "@geoscene/core/widgets/ScaleBar/ScaleBarViewModel.js";
import { LitElement as B, createEvent as M, noShadowRoot as R, safeClassMap as a, safeStyleMap as _ } from "@arcgis/lumina";
import { u as x } from "../../chunks/useT9n.js";
import { m as D } from "../../chunks/useViewModel.js";
import { g as v } from "../../chunks/globalCss.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 $(f = 0, e = 0) {
  return { x: f, y: e };
}
const r = "geoscene-scale-bar", t = {
  base: r,
  labelContainer: `${r}__label-container`,
  rulerLabelContainer: `${r}__label-container--ruler`,
  lineLabelContainer: `${r}__label-container--line`,
  topLabelContainer: `${r}__label-container--top`,
  bottomLabelContainer: `${r}__label-container--bottom`,
  label: `${r}__label`,
  line: `${r}__line`,
  topLine: `${r}__line--top`,
  bottomLine: `${r}__line--bottom`,
  ruler: `${r}__ruler`,
  rulerBlock: `${r}__ruler-block`,
  barContainer: `${r}__bar-container`,
  rulerBarContainer: `${r}__bar-container--ruler`,
  lineBarContainer: `${r}__bar-container--line`
}, U = D(L);
class k extends B {
  constructor() {
    super(...arguments), this._defaultUnit = "metric", this.messages = x(), this._scaleComputedFrom = $(), this.viewModel = U(this), this.autoDestroyDisabled = !1, this.barStyle = "line", this.icon = "actual-size", this.position = "top-left", this.geosceneReady = M();
  }
  static {
    this.properties = { autoDestroyDisabled: 5, barStyle: 1, icon: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, unit: 1 };
  }
  static {
    this.shadowRootOptions = R;
  }
  get unit() {
    return this._unit ?? this._defaultUnit;
  }
  set unit(e) {
    this._unit = e;
  }
  async destroy() {
    await this.manager.destroy();
  }
  updated() {
    this._handleRootCreateOrUpdate();
  }
  loaded() {
    this.manager.onLifecycle(() => y(() => {
      const e = this.viewModel.view;
      return {
        defaultUnit: e ? w(e) : void 0,
        stationary: e?.stationary,
        center: e?.center,
        scale: e?.scale,
        zoom: e?.zoom
      };
    }, ({ defaultUnit: e, stationary: i }) => {
      this._defaultUnit = e ?? "metric", i && this.requestUpdate();
    }));
  }
  _handleContainerRef(e) {
    e !== void 0 && this._handleRootCreateOrUpdate();
  }
  _handleRootCreateOrUpdate() {
    if (!this.viewModel)
      return;
    const e = this._scaleComputedFrom, i = this.el.getBoundingClientRect(), s = i.left + window.pageXOffset, l = i.top + window.pageYOffset, n = $(s, l);
    (n.x !== e.x || n.y !== e.y) && (this._scaleComputedFrom = n);
  }
  _formatDistance(e, i) {
    return S(e, {
      style: "unit",
      unit: i,
      unitDisplay: "short"
    });
  }
  render() {
    const e = this.viewModel.state === "disabled", i = {
      [v.disabled]: e
    };
    let s, l;
    if (!e) {
      const { unit: n, barStyle: c } = this, p = n === "imperial" || n === "dual", b = n === "metric" || n === "dual", m = 100, h = n === "dual" ? "line" : c;
      if (p) {
        const o = this.viewModel.getScaleBarProperties(m, "imperial");
        o && (l = h === "ruler" ? this._renderRuler(o) : this._renderLine(o, "bottom"));
      }
      if (b) {
        const o = this.viewModel.getScaleBarProperties(m, "metric");
        o && (s = h === "ruler" ? this._renderRuler(o) : this._renderLine(o, "top"));
      }
    }
    return u`<div class=${a(d(t.base, v.widget, i))} ${g(this._handleContainerRef)}>${s}${l}</div>`;
  }
  _renderRuler(e) {
    const { length: i, unit: s, value: l } = e, n = Math.round(i), c = this._formatDistance(l, s);
    return u`<div class=${a(d(t.barContainer, t.rulerBarContainer))}><div class=${a(t.ruler)} style=${_({ width: `${n}px` })}><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div><div class=${a(t.rulerBlock)}></div></div><div class=${a(d(t.labelContainer, t.rulerLabelContainer))}><div class=${a(t.label)}>0</div><div class=${a(t.label)}>${c}</div></div></div>`;
  }
  _renderLine(e, i) {
    const { length: s, unit: l, value: n } = e, c = Math.round(s), p = this._formatDistance(n, l), b = {
      [t.topLabelContainer]: i === "top",
      [t.bottomLabelContainer]: i === "bottom"
    }, m = u`<div class=${a(d(t.labelContainer, t.lineLabelContainer, b))}><div class=${a(t.label)}>${p}</div></div>`, h = {
      [t.topLine]: i === "top",
      [t.bottomLine]: i === "bottom"
    }, o = u`<div class=${a(d(t.line, h))} style=${_({ width: `${c}px` })}></div>`;
    return u`<div class=${a(d(t.barContainer, t.lineBarContainer))}>${[o, m]}</div>`;
  }
}
C("geoscene-scale-bar", k);
export {
  k as GeosceneScaleBar
};