import { c as p } from "../../chunks/runtime.js";
import { html as o } from "lit-html";
import { ref as m } from "lit-html/directives/ref.js";
import { keyed as d } from "lit-html/directives/keyed.js";
import { usePropertyChange as b } from "@arcgis/lumina/controllers";
import { focusElement as g } from "@arcgis/components-utils";
import { watch as _ } from "@geoscene/core/core/reactiveUtils.js";
import f from "@geoscene/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
import { LitElement as v, createEvent as $, noShadowRoot as w, safeClassMap as n, nothing as l, safeStyleMap as R } from "@arcgis/lumina";
import { u as C } from "../../chunks/useT9n.js";
import { m as x } from "../../chunks/useViewModel.js";
import { g as y } from "../../chunks/component-utils.js";
import { g as h } from "../../chunks/globalCss.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 = [-45, 0, 45, -90, 90, -135, 180, 135], S = {
  0: { label: "north", iconName: "chevron-up" },
  45: { label: "northEast", iconName: "chevron-up-right" },
  90: { label: "east", iconName: "chevron-right" },
  135: { label: "southEast", iconName: "chevron-down-right" },
  180: { label: "south", iconName: "chevron-down" },
  "-135": { label: "southWest", iconName: "chevron-down-left" },
  "-90": { label: "west", iconName: "chevron-left" },
  "-45": { label: "northWest", iconName: "chevron-up-left" }
}, a = "geoscene-directional-pad", s = {
  base: a,
  buttonsContainer: `${a}__buttons-container`,
  button: `${a}__button`,
  compassButton: `${a}__compass`,
  rotationContainer: `${a}__rotation-container`,
  rotationSliderContainer: `${a}__rotation-slider-container`,
  rotationReset: `${a}__rotation-reset-button`,
  error: `${a}__error`
}, B = M`@layer{.geoscene-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);outline:none;box-shadow:none!important;background-color:transparent!important;user-select:none;calcite-action-pad{display:contents}calcite-action-group{touch-action:none}calcite-action{aspect-ratio:1}}.geoscene-directional-pad__buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;--calcite-action-group-padding: 0;calcite-action{--calcite-color-focus: var(--calcite-color-foreground-3)}calcite-action:not([active]){--calcite-action-background-color-press: var(--calcite-color-foreground-1)}calcite-action[active]{--calcite-action-background-color: var(--calcite-color-foreground-3)}calcite-icon{transform:var(--rotation, unset)}@media (hover: none){calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.geoscene-directional-pad__rotation-container{display:block;width:100%;calcite-action{flex:.3}}.geoscene-directional-pad__rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}}`;
function E(c) {
  const { x: t, y: e, width: i, height: r } = c.getBoundingClientRect();
  return { x: t + i / 2, y: e + r / 2 };
}
function D(c) {
  return c?.spatialReference?.isWebMercator || c?.spatialReference?.isGeographic || !1;
}
const k = x(f);
class P extends v {
  constructor() {
    super(...arguments), this.messages = C({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = k(this), this.angle = this.viewModel.angle, this.rotation = this.viewModel.rotation, this.autoDestroyDisabled = !1, this.disabled = this.viewModel.disabled, this.hideDirectionalButtons = !1, this.icon = "move", this.position = "bottom-left", this.showRotationResetButton = !1, this.showRotationSlider = !1, this.state = this.viewModel.state, this.visualScale = "s", this.geoscenePropertyChange = b()("state"), this.geosceneReady = $();
  }
  static {
    this.properties = { _rotationEnabled: 16, angle: 16, rotation: 16, autoDestroyDisabled: 5, disabled: 5, hideDirectionalButtons: 5, icon: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, showRotationResetButton: 5, showRotationSlider: 5, state: 3, visualScale: 1 };
  }
  static {
    this.shadowRootOptions = w;
  }
  static {
    this.styles = B;
  }
  get _rotationEnabled() {
    return this.view?.ready ? this.view.constraints.rotationEnabled ?? !1 : !0;
  }
  async destroy() {
    await this.manager.destroy();
  }
  loaded() {
    this.manager.onLifecycle(() => [
      // Move focus when movement angle changed by touch/mouse (not keyboard!)
      _(() => this.viewModel.angle, () => {
        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? y(this)?.focus() : g(this._buttons[this.viewModel.angle]));
      })
    ]);
  }
  _rotateIcon(t) {
    return {
      "--rotation": `rotate(${t}deg)`
    };
  }
  _setButtonContainerRef(t) {
    t !== void 0 ? (this._buttonsContainer = t, queueMicrotask(() => {
      this._buttons = Object.fromEntries(Array.from(t.children, (e) => [
        Number.parseInt(e.getAttribute("data-angle") ?? ""),
        e
      ]));
    })) : (this._buttonsContainer = void 0, this._buttons = {});
  }
  _onButtonPointerDown(t) {
    if (this._buttonsContainer === void 0)
      return;
    t.composedPath().find((r) => r.hasPointerCapture?.(t.pointerId))?.releasePointerCapture(t.pointerId);
    const i = E(this._buttonsContainer);
    this.viewModel.beginFollowingPointer(t, i);
  }
  _onSliderInput({ currentTarget: t }) {
    typeof t.value == "number" && (this.viewModel.rotation = t.value);
  }
  _onRotationReset() {
    this.viewModel.rotation = 0;
  }
  _onClick(t) {
    this.viewModel.moveOnce(t);
  }
  render() {
    const { label: t, disabled: e } = this, i = this.view == null || this.view.type === "2d";
    return o`<div .ariaLabel=${t ?? void 0} class=${n({ [s.base]: !0, [h.widget]: !0, [h.disabled]: e })} tabindex=-1>${i ? this._renderContent() : this._renderUnsupportedMessage()}</div>`;
  }
  _renderUnsupportedMessage() {
    return o`<section class=${n(s.error)}><p>${this.messages.unsupported}</p></section>`;
  }
  _renderContent() {
    return [
      this.hideDirectionalButtons ? void 0 : this._renderDirectionalButtons(),
      this.showRotationSlider ? this._renderRotation() : void 0
    ];
  }
  _renderDirectionalButtons() {
    return d("directional-buttons-container", o`<calcite-action-bar expand-disabled floating layout=grid overflow-actions-disabled><calcite-action-group class=${n(s.buttonsContainer)} dir=ltr @contextmenu=${{
      handleEvent: this._onContextMenu,
      capture: !0
    }} ${m(this._setButtonContainerRef)}>${u.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${u.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-bar>`);
  }
  _renderButton(t) {
    const { label: e, iconName: i } = S[t], r = this.messages[e];
    return o`<calcite-action .active=${this.angle === t} alignment=center class=${n(s.button)} data-angle=${t ?? l} .disabled=${this.disabled} @click=${this._onClick.bind(this, t)} @pointerdown=${this._onButtonPointerDown} .scale=${this.visualScale} .text=${r ?? ""} title=${r ?? l}><calcite-icon .icon=${i} .scale=${this.visualScale}></calcite-icon></calcite-action>`;
  }
  _renderCompass() {
    const t = this.disabled || D(this.view) ? "compass-needle" : "arrow-up", e = this.rotation === 0, i = this.messages.resetHeading;
    return o`<calcite-action alignment=center class=${n(s.compassButton)} .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${R(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? l}>${!e && o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
  }
  _renderRotation() {
    return d("slider-container", o`<calcite-action-bar expand-disabled floating layout=horizontal><calcite-action-group class=${n(s.rotationContainer)}>${this.showRotationResetButton ? this._renderRotationResetButton() : null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-bar>`);
  }
  _renderRotationResetButton() {
    const t = this.messages.resetHeading;
    return o`<calcite-action alignment=center class=${n(s.rotationReset)} .disabled=${this.disabled || !this._rotationEnabled} @click=${this._onRotationReset} .scale=${this.visualScale} .text=${t ?? ""} title=${t ?? l}><calcite-icon flip-rtl icon=rotate .scale=${this.visualScale}></calcite-icon></calcite-action>`;
  }
  _renderRotationSlider() {
    return o`<div class=${n(s.rotationSliderContainer)}><calcite-slider .ariaLabel=${this.messages.heading} .disabled=${this.disabled || !this._rotationEnabled} label-handles max=360 min=0 required .scale=${this.visualScale} .value=${Math.round(this.rotation)} @calciteSliderInput=${this._onSliderInput}></calcite-slider></div>`;
  }
}
p("geoscene-directional-pad", P);
export {
  P as GeosceneDirectionalPad
};