import { c as g } from "../../chunks/runtime.js";
import { usePropertyChange as p } from "@arcgis/lumina/controllers";
import { when as c } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as h, createEvent as u, safeClassMap as v, nothing as r } from "@arcgis/lumina";
import { css as m, html as b } from "lit";
import { u as f } from "../../chunks/useT9n.js";
import { u as y } from "../../chunks/useView.js";
import { g as M } from "../../chunks/globalCss.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.34/esri/copyright.txt for details.
v4.34.7 */
const x = "arcgis-navigation-toggle", l = {
  base: x,
  button: "arcgis-button"
}, $ = m`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}calcite-button{width:var(--calcite-spacing-xxxl);height:var(--calcite-spacing-xxxl)}}:host{display:flex;inline-size:fit-content;block-size:fit-content}`, i = { pan: "move", rotate: "rotate" };
class _ extends h {
  constructor() {
    super(...arguments), this._messages = f(), this._state = "disabled", this.autoDestroyDisabled = !1, this.view = y(this), this.icon = i.pan, this.layout = "vertical", this.navigationMode = "pan", this.arcgisPropertyChange = p()("layout", "state"), this.arcgisReady = u();
  }
  static {
    this.properties = { _state: 16, autoDestroyDisabled: 5, view: 0, icon: 1, label: 1, layout: 3, messageOverrides: 0, navigationMode: 3, position: 1, referenceElement: 1, state: 35 };
  }
  static {
    this.styles = $;
  }
  get state() {
    return this._state;
  }
  async destroy() {
    await this.manager.destroy();
  }
  async toggle() {
    this.state !== "disabled" && (this.navigationMode = this.navigationMode !== "pan" ? "pan" : "rotate");
  }
  load() {
    this.manager.onLifecycle(() => [
      c(() => this.view?.navigation?.actionMap, () => this._updateNavigationActionMap()),
      c(() => {
        const { view: t } = this;
        return t?.ready && t?.type === "3d" ? "ready" : "disabled";
      }, (t) => {
        this._state = t;
      }, { sync: !0, initial: !0 })
    ]);
  }
  willUpdate(t) {
    t.has("navigationMode") && this._updateNavigationActionMap();
  }
  _onPanClick() {
    this.navigationMode = "pan";
  }
  _onRotateClick() {
    this.navigationMode = "rotate";
  }
  _updateNavigationActionMap() {
    const t = this.view?.navigation?.actionMap;
    if (!t)
      return;
    const a = this.navigationMode === "pan";
    t.dragPrimary = a ? "pan" : "rotate", t.dragSecondary = a ? "rotate" : "pan";
  }
  render() {
    const { _messages: t, navigationMode: a, state: d } = this, o = t.pan ?? "", s = t.rotate ?? "", e = d === "disabled", n = a === "pan";
    return b`<calcite-action-bar class=${v({ [l.base]: !0, [l.button]: !0, [M.disabled]: e })} expand-disabled .layout=${this.layout} scale=s><calcite-action .active=${n} appearance=solid .disabled=${e} .icon=${i.pan} @click=${this._onPanClick} scale=s .text=${o} title=${o ?? r}></calcite-action><calcite-action .active=${!n} appearance=solid .disabled=${e} .icon=${i.rotate} @click=${this._onRotateClick} scale=s .text=${s} title=${s ?? r}></calcite-action></calcite-action-bar>`;
  }
}
g("arcgis-navigation-toggle", _);
export {
  _ as ArcgisNavigationToggle
};
