/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
import { c as p } from "../../chunks/runtime.js";
import { repeat as b } from "lit/directives/repeat.js";
import { css as L, html as o } from "lit";
import { keyed as x } from "lit/directives/keyed.js";
import { LitElement as P, createEvent as $, safeClassMap as a, nothing as h, safeStyleMap as m } from "@arcgis/lumina";
import { l as w, a as H, b as y, c as M, d as C, e as k, f as z, g as W, h as E, i as v, j as d } from "../../chunks/constants.js";
import { clamp as c } from "@arcgis/toolkit/number";
import { queryAll as O } from "lit/decorators.js";
import { createRef as A, ref as B } from "lit/directives/ref.js";
import { watch as N } from "@arcgis/core/core/reactiveUtils.js";
const S = L`:host{transition:max-height .25s ease-in-out;--esri-widget-padding: 12px 15px;--level-picker-padding: var(--calcite-spacing-md);--level-label-color: var(--calcite-color-text-1);--level-label-color--empty: var(--calcite-color-text-2);--level-label-color--active: var(--calcite-color-brand);--level-border-width: 2px;--level-border-color: var(--calcite-color-border-2);--level-border-color--hover: var(--calcite-color-brand);--level-border-color--active: var(--calcite-color-brand);--level-background-color: rgb(from var(--calcite-color-foreground-1) r g b / 70%);--level-background-color--hover: rgb(from var(--calcite-color-foreground-1) r g b / 90%);--level-background-color--active: var(--calcite-color-brand);--focus-outline-width: 2px;--focus-outline-color: var(--calcite-color-brand);--focus-outline-offset: 2px}.container{height:max-content;display:flex;flex-direction:row;align-items:center;&.no-level{display:none}>*{height:max-content}}.clear-button{appearance:none;margin-inline-start:7px;display:none;position:absolute;inset-block-start:-4px}.label-container{--width: 90px;--height: 40px;flex-direction:column;justify-content:space-between;align-items:center;width:50%;margin-inline-end:var(--calcite-spacing-md);display:flex;&.active{color:var(--calcite-color-brand)}&.empty{cursor:default;color:var(--calcite-color-border-2);font-size:var(--calcite-font-size);font-weight:var(--calcite-font-weight-light)}&:focus{outline:none}&:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus)}}.level-label{position:relative;text-align:center;>span{pointer-events:none}&.active{font-size:var(--height);line-height:calc(var(--height) + 6px);>.clear-button{display:inline-block}}}.tiles-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;transform:rotate(180deg);cursor:pointer;padding:20px 0;width:50%}.tiles-inner-container{transition:margin .3s}`;
var T = Object.defineProperty, F = (t, e, i, n) => {
  for (var l = void 0, r = t.length - 1, s; r >= 0; r--)
    (s = t[r]) && (l = s(e, i, l) || l);
  return l && T(e, i, l), l;
};
class f extends P {
  constructor() {
    super(...arguments), this.hovering = !1, this.onPointerMove = (e) => {
      if (!this.hovering)
        return !1;
      if (window.getSelection()?.removeAllRanges(), this.containerPosTop != null) {
        const i = this.containerPosTop, n = v * d, l = this.expandedLevelsMargin;
        let r = this.levelsHeight, s = i + n + l;
        const g = this.levelHeight / 2;
        s += g, r -= g;
        let u = (e.clientY - s) / r;
        u += W, this.normalizedPointerPosition = u;
      }
      return !1;
    }, this.onPointerEnter = () => {
      const e = this.levelsContainer.value;
      this.hovering || e == null || (this.hovering = !0, this.containerPosTop = e.getBoundingClientRect().top ?? 0);
    }, this.levelsContainer = A(), this.onPointerLeave = () => {
      if (this.hovering) {
        window.getSelection()?.removeAllRanges();
        for (const e of this.levelItems)
          e.width = void 0;
        this.normalizedPointerPosition = 0, this.hoveredLevel = null, this.hovering = !1;
      }
    }, this.onPointerUp = () => {
      window.getSelection()?.removeAllRanges();
      const e = this.level;
      this.hoveredLevel == null || e == null || this.#r();
    }, this.expandedLevelsHeight = void 0, this.normalizedPointerPosition = 0, this.hoveredLevel = null, this.arcgisBuildingLevelChange = $({ bubbles: !0, composed: !0 });
  }
  static {
    this.properties = { expandedLevelsHeight: 16, normalizedPointerPosition: 16, hoveredLevel: 16, messages: 0, level: 0, numberOfLevels: 32, levelHeight: 32, levelsHeight: 32 };
  }
  static {
    this.styles = S;
  }
  get levels() {
    return this.level?.allowedValues ?? [];
  }
  get levelWidth() {
    const { levelWidthNominator: e, levelWidthConstant: i } = E, n = e / Math.sqrt(this.numberOfLevels) + i;
    return Math.round(c(n, w, H));
  }
  get _gaussianFactor() {
    const e = this.numberOfLevels;
    return e / Math.log(y * e) * M;
  }
  get expandedLevelsMargin() {
    return Math.round(((this.expandedLevelsHeight ?? 0) - this.levelsHeight) / 2);
  }
  get levelClosestToPointer() {
    if (!this.hovering)
      return null;
    const e = this.numberOfLevels - 1, i = this.clampedNormalizedPointerPosition;
    return e >= 0 && i != null ? this.levels[Math.round((1 - i) * e)] : null;
  }
  get clampedNormalizedPointerPosition() {
    return c(this.normalizedPointerPosition, 0, 1);
  }
  get numberOfLevels() {
    return this.levels.length;
  }
  get levelHeight() {
    const e = C, i = e * 2 / Math.sqrt(this.numberOfLevels);
    return Math.round(c(i, 2, e));
  }
  get levelsHeight() {
    return Math.round(this.levelHeight * this.numberOfLevels);
  }
  async loaded() {
    this.listen("keydown", this.#n.bind(this)), this.manager.onLifecycle(() => [
      N(() => [this.normalizedPointerPosition, this.hovering], () => this.onPointerPositionChange(), { initial: !0 })
    ]);
  }
  onPointerPositionChange() {
    let e = 0;
    this.levelItems.forEach((n, l) => {
      const { width: r, height: s } = this.getLevelWidgetSize(l);
      n.height = s, n.width = r, e += s;
    }), this.hoveredLevel = this.levelClosestToPointer;
    const i = this.expandedLevelsHeight;
    (i == null || Math.abs(i - e) > 30) && (this.expandedLevelsHeight = e);
  }
  getLevelWidgetSize(e) {
    const i = { width: this.levelWidth, height: this.levelHeight };
    if (this.hovering) {
      const n = this.getGaussianFactor(e, this.clampedNormalizedPointerPosition);
      i.width += k * n, i.height += z * n;
    }
    return i;
  }
  getGaussianFactor(e, i) {
    const n = this.numberOfLevels - 1, l = (n - e) / n, r = this._gaussianFactor * (l - i);
    return Math.exp(-(r ** 2));
  }
  #n(e) {
    switch (e.key) {
      case "ArrowDown":
      case "ArrowLeft":
        e.preventDefault(), e.stopPropagation(), this.#i(), this.#e();
        break;
      case "ArrowUp":
      case "ArrowRight":
        e.preventDefault(), e.stopPropagation(), this.#t(), this.#e();
        break;
    }
  }
  #e() {
    Array.from(this.levelItems).find((i) => i.level === this.level?.value)?.focus();
  }
  #t() {
    this.level && (this.level.next(), this.arcgisBuildingLevelChange.emit());
  }
  #i() {
    this.level && (this.level.previous(), this.arcgisBuildingLevelChange.emit());
  }
  #r() {
    this.level == null || this.hoveredLevel == null || (this.level.value === this.hoveredLevel && !this.level.disabled ? this.#l() : (this.level.select(this.hoveredLevel), this.arcgisBuildingLevelChange.emit()));
  }
  #l() {
    this.level && !this.level.disabled && (this.level.clear(), this.arcgisBuildingLevelChange.emit());
  }
  render() {
    if (!this.messages)
      return null;
    const e = this.level;
    e?.value;
    const i = e && !e.disabled, n = this.numberOfLevels > 1 ? b(this.levels, (l) => l, (l) => o`<arcgis-building-level-item .level=${l} .baseWidth=${this.levelWidth} .hovered=${this.hoveredLevel === l} .active=${e && !e.disabled && e.value === l} class=${a({ "animate-level": !this.hovering })} .messages=${this.messages}></arcgis-building-level-item>`) : null;
    return o`<div class=${a({
      container: !0,
      "no-level": this.numberOfLevels < 2,
      "animate-level": this.hovering
    })}>${D({ messages: this.messages, active: i, hasNext: e?.hasNext, hasPrevious: e?.hasPrevious, onNext: () => this.#t(), onPrevious: () => this.#i(), children: R({ messages: this.messages, level: this.hoveredLevel ?? e?.value, active: i, onClear: () => this.#l() }) })}${_({ ref: this.levelsContainer, expandedLevelsMargin: this.expandedLevelsMargin, levelsHeight: this.levelsHeight, onPointerEnter: this.onPointerEnter, onPointerMove: this.onPointerMove, onPointerLeave: this.onPointerLeave, onPointerUp: this.onPointerUp, children: n })}</div>`;
  }
}
F([
  O("arcgis-building-level-item")
], f.prototype, "levelItems");
function D(t) {
  return o`<div class=${a({
    "label-container": !0,
    empty: !t.active,
    active: !0,
    hover: !0
  })} title=${t.messages.selectLevel ?? h} tabindex=0><calcite-action icon=chevron-up appearance=transparent .text=${t.messages.nextLevel} @click=${t.onNext} .disabled=${!t.hasNext}></calcite-action>${t.children}<calcite-action icon=chevron-down appearance=transparent .text=${t.messages.previousLevel} @click=${t.onPrevious} .disabled=${!t.hasPrevious}></calcite-action></div>`;
}
function R(t) {
  const e = t.messages;
  return o`<div aria-label=${e.clearLevel ?? h} class=${a({
    "level-label": !0,
    active: t.active && t.level != null
  })} @click=${t.onClear} title=${e.clearLevel ?? h}>${t.active ? o`<span>${t.level}</span>${x("clear-button", o`<calcite-fab appearance=outline-fill class="clear-button" icon=x kind=neutral @click=${t.onClear} scale=s></calcite-fab>`)}` : o`<span>${e.selectLevel}</span>`}</div>`;
}
function _(t) {
  const e = v * d, i = -e / d, n = t.levelsHeight, l = n + e * 2;
  return o`<div class="tiles-container" @pointerenter=${t.onPointerEnter} @pointerover=${t.onPointerEnter} @pointermove=${t.onPointerMove} @pointerleave=${t.onPointerLeave} @pointerup=${t.onPointerUp} @click=${t.onClick} style=${m({
    height: `${l}px`,
    marginBlockStart: `${i}px`,
    marginBlockEnd: `${i}px`
  })} ${B(t.ref)}><div class="tiles-inner-container" style=${m({
    height: `${n}px`,
    margin: "0",
    marginBlockStart: `${v - t.expandedLevelsMargin}px`
  })}>${t.children}</div></div>`;
}
p("arcgis-building-level-picker", f);
export {
  f as BuildingLevelPicker
};
