import { c as o } from "../../chunks/runtime.js";
import { ref as c } from "lit/directives/ref.js";
import { css as n, html as s } from "lit";
import { LitElement as d, createEvent as a } from "@arcgis/lumina";
import { setFocusOnElement as h } from "@arcgis/toolkit/dom";
import { createFilterExpression as f } from "@arcgis/toolkit/string";
import { u as m } from "../../chunks/useT9n.js";
import { log as u } from "@arcgis/toolkit/log";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/5.0/esri/copyright.txt for details.
v5.0.0-next.128 */
const g = n`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-list-item-group{background-color:var(--calcite-color-foreground-2);word-break:break-word}}`;
function p(l) {
  l.key === "Enter" && l.stopPropagation();
}
class b extends d {
  constructor() {
    super(...arguments), this._beforeBack = async () => {
      this.removeLastPanelRenderer(), this._filterValue = "";
    }, this.messages = m(), this._filterValue = "", this._flowItemRenderers = [], this._mode = "profile", this._mutationCounter = 1, this.loading = !1, this.closed = !1, this.arcgisClose = a({ bubbles: !1 }), this.arcgisItemSelected = a({ bubbles: !1 });
  }
  static {
    this.properties = { _filterValue: 16, _flowItemRenderers: 16, _mode: 16, _mutationCounter: 16, loading: 5, modelId: 1, closed: 5, variable: 0 };
  }
  static {
    this.styles = g;
  }
  load() {
    this._variableChanged();
  }
  willUpdate(e) {
    e.has("modelId") && (this._flowItemRenderers = []), e.has("variable") && this._variableChanged();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this._flowObserver?.disconnect();
  }
  _variableChanged() {
    this._mode = this.variable?.type === "featureSet" ? "featureSet" : "profile";
  }
  addPanelRenderer(e) {
    this._flowItemRenderers = [...this._flowItemRenderers, e];
  }
  removeLastPanelRenderer() {
    this._flowItemRenderers = this._flowItemRenderers.slice(0, -1);
  }
  _isMode(e) {
    return this._mode === e;
  }
  flowFocusHandler(e) {
    if (!e) {
      this._flowObserver?.disconnect(), this._flowObserver = void 0;
      return;
    }
    this._flowObserver || (this._flowObserver = new MutationObserver(() => {
      h(e.querySelector("calcite-flow-item:last-child"), "calcite-input");
    }), this._flowObserver.observe(e, { attributes: !0, attributeFilter: ["id"], childList: !0 }));
  }
  _updateFilterValue(e) {
    this._filterValue = e.currentTarget.value;
  }
  _emitClose() {
    this.arcgisClose.emit();
  }
  _backToTop() {
    this._flowItemRenderers = [];
  }
  _emitItemSelected(e, t) {
    if (t.nonInteractive)
      return;
    const i = e;
    (!i.key || i.key === "Enter") && (e.preventDefault(), this.arcgisItemSelected.emit(t.snippet));
  }
  _showCollectionPanel(e, t) {
    e.stopPropagation(), this.addPanelRenderer(
      // Add a function to render the variable
      (i) => this.renderCollectionBasedVariable(t, !1, i)
    );
  }
  _getHeadingForCollection(e) {
    if (!e)
      return "";
    switch (this._mode) {
      case "profile":
        return this.messages.profilevariables ?? "";
      case "featureSet":
        return this.messages.fields ?? "";
    }
  }
  _getDescriptionForCollection(e) {
    if (!e)
      return "";
    switch (this._mode) {
      case "profile":
        return e.breadcrumb;
      case "featureSet":
        return e.variables[0]?.getLabel() ?? "";
    }
  }
  renderCollectionBasedVariable(e, t = !1, i = !1) {
    if (!e)
      return null;
    let r = this.loading;
    return !r && !e.loaded && (e.loadSource().then(() => setTimeout(() => {
      this._mutationCounter += 1;
    })).catch(() => {
      u("error", this, "Error loading collection"), r = !1;
    }), r = !0), s`<calcite-flow-item heading-level=2 .heading=${this._getHeadingForCollection(e)} .description=${this._getDescriptionForCollection(e)} .beforeBack=${this._beforeBack} closable @calciteFlowItemClose=${this._emitClose} .selected=${i}><calcite-action slot=header-actions-end .text=${this.messages.backtotop ?? ""} scale=m .hidden=${t || this._isMode("featureSet")} icon=chevrons-left icon-flip-rtl @click=${this._backToTop}></calcite-action><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m .label=${this.messages.filterthevariablesbyname ?? ""} name=variable-filter></calcite-input>${r ? s`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? ""}></calcite-loader>` : s`<calcite-list label=variables>${this.renderEditorVariables(e)}</calcite-list>`}</calcite-flow-item>`;
  }
  renderEditorVariables(e) {
    const t = f(this._filterValue), i = e.variables.filter((r) => r.passFilter(t));
    return i.length ? i.map((r) => this.renderEditorVariable(r)) : s`<div class="notice-container">${this.messages.noitems}</div>`;
  }
  renderEditorVariable(e) {
    switch (e.type) {
      case "group":
        return this._isMode("featureSet") && e.isHeader ? s`<calcite-list-item-group .heading=${e.getLabel()}></calcite-list-item-group>` : this._isMode("featureSet") && e._label?.code === "fields" ? this.renderEditorVariables(e) : s`<calcite-list-item-group .heading=${e.getLabel()}>${this.renderEditorVariables(e)}</calcite-list-item-group>`;
      default:
        return s`<calcite-list-item .label=${e.getLabel()} .description=${e.getDescription()} @calciteListItemSelect=${(t) => this._emitItemSelected(t, e)} @keydown=${(t) => this._emitItemSelected(t, e)}>${e.isCollection ? s`<calcite-action slot=actions-end .text=${this.messages.expand ?? ""} scale=s icon=chevron-right icon-flip-rtl @click=${(t) => this._showCollectionPanel(t, e)} @keydown=${p}></calcite-action>` : null}${e.icon ? s`<calcite-icon .icon=${e.icon} scale=s slot=content-start></calcite-icon>` : null}</calcite-list-item>`;
    }
  }
  render() {
    return this.closed ? null : !this.loading && this.variable?.loaded && !this.variable?.variables.length ? s`<calcite-flow><calcite-flow-item heading-level=2 .heading=${this.messages.profilevariables} closable @calciteFlowItemClose=${this._emitClose}><div class="notice-container">${this.messages.noprofilevariablesmessage}</div></calcite-flow-item></calcite-flow>` : s`<calcite-flow ${c(this.flowFocusHandler)}>${this.renderCollectionBasedVariable(this.variable, !0, this._flowItemRenderers.length === 0)}${this._flowItemRenderers.map((e, t, i) => (
      // check if the current flow item is the last one, if so, renderer will set selected = true
      e(t === i.length - 1)
    ))}</calcite-flow>`;
  }
}
o("arcgis-editor-variables", b);
export {
  b as ArcgisEditorVariables
};
