/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as _ } from "../../chunks/runtime.js";
import { P as g } from "../../chunks/popupUtils.js";
import { u as v } from "../../chunks/useT9n.js";
import { css as b, html as i } from "lit";
import { LitElement as w, createEvent as n, noShadowRoot as m, safeStyleMap as y, safeClassMap as s } from "@arcgis/lumina";
import { createRef as $, ref as F } from "lit-html/directives/ref.js";
import * as r from "@arcgis/core/core/reactiveUtils.js";
import c from "@arcgis/core/support/actions/ActionButton.js";
const E = b`@layer{:host{display:block;--calcite-label-margin-bottom: 0}.padding-1-2{padding:.5rem}.display-none{display:none!important}.display-flex{display:flex}.position-absolute{position:absolute;inset:0;overflow:auto}.feature-node{position:relative!important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:.5rem!important;background-color:var(--calcite-color-surface-2)!important;height:100%!important}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:700}.z-index-1{z-index:1}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:700}}`;
class x extends w {
  constructor() {
    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphics = [], this.isLoading = !1, this.isMobile = !1, this.allowEditing = !1, this.highlightEnabled = !0, this.paginationEnabled = !0, this.position = "absolute", this.showCloseBtn = !1, this.showCopyPasteActions = !1, this.pasteEnabled = !1, this._alertOpen = !1, this._count = "", this._editRecordOpen = !1, this._isMultipleEdits = !1, this._mobileTitle = "", this._showListView = !1, this._translations = v({ name: "info-card", blocking: !0 }), this._navigatedToRelatedFeature = !1, this._editEnabled = !1, this._features = $(), this.popupClosed = n(), this.clearSelection = n(), this.selectionChanged = n(), this.copyFeatures = n(), this.pasteFeatures = n(), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "refreshGraphics", this.refreshGraphics), this.listenOn(window, "editMultipleFeatures", this.editMultipleFeatures), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated), this.listenOn(window, "clearSelection", this._alertClosed);
  }
  static {
    this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphics: 0, isLoading: 5, isMobile: 5, mapView: 0, featuresReferenceId: 1, allowEditing: 5, highlightEnabled: 5, paginationEnabled: 5, position: 1, showCloseBtn: 5, showCopyPasteActions: 5, pasteEnabled: 5, _alertOpen: 16, _count: 16, _editRecordOpen: 16, _isMultipleEdits: 16, _mobileTitle: 16, _showListView: 16, _translations: 16, _navigatedToRelatedFeature: 16 };
  }
  static {
    this.styles = E;
  }
  static {
    this.shadowRootOptions = m;
  }
  willUpdate(e) {
    if (e.has("graphics") && this.graphicsWatchHandler(), e.has("pasteEnabled") && this.hasUpdated && this._features.value?.headerActions?.length) {
      const t = this._features.value.headerActions.find((a) => a.id === "paste-features");
      t && (t.disabled = !this.pasteEnabled);
    }
    if (e.has("showCopyPasteActions") && this.hasUpdated && this.handleHeaderActions(), e.has("_translations")) {
      const t = this._translations._lang, a = e.get("_translations")?._lang;
      if (t && a && t !== a && this._features.value) {
        const l = [...this.graphics];
        this.graphics = [], this.graphics = l;
      }
    }
  }
  async graphicsWatchHandler() {
    if (this._navigatedToRelatedFeature && this._features.value && (await this._features.value.clear(), await this._features.value.close(), this._count = "", this._navigatedToRelatedFeature = !1), await this.setGraphics(), this._features.value?.headerActions?.length && this.showCopyPasteActions) {
      const e = this._features.value.headerActions.find((t) => t.id === "copy-features");
      e && (e.disabled = this.graphics.length === 0);
    }
  }
  async getSelectedFeature() {
    return this._features.value?.selectedFeature;
  }
  async refresh() {
    await this.setGraphics();
  }
  async back() {
    await this._back();
  }
  async next() {
    await this._next();
  }
  async toggleListView() {
    this._toggleListView();
  }
  async closeEdit() {
    this._editRecordOpen = !1, this._isMultipleEdits = !1;
  }
  async layerSelectionChange() {
    this._showListView = !1, this._features.value?.viewModel && (this._features.value.featureMenuOpen = !1, await this._features.value.close());
  }
  async refreshGraphics(e) {
    this._navigatedToRelatedFeature || (this.graphics = [...e.detail]);
  }
  async editMultipleFeatures(e) {
    this._isMultipleEdits = !0, this._openEditRecord();
  }
  async selectedLanguageUpdated(e) {
    await this._features.value?.clear(), await this._features.value?.close();
  }
  async load() {
    this._popupUtils = new g();
  }
  async loaded() {
    this.graphics?.length > 0 && await this.setGraphics();
  }
  render() {
    const e = this.isLoading ? "" : "display-none", t = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", a = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", l = this._features.value?.features && this._features.value.features.length < 2 || this._navigatedToRelatedFeature, h = Number(this._features.value?.selectedFeature?.getObjectId()), u = Number.isNaN(h) ? [] : [h], d = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, p = this._relatedFeature ? [this._relatedFeature] : this.graphics, f = this._navigatedToRelatedFeature ? 0 : this._features.value?.selectedFeatureIndex, o = this.isMobile ? "display-none" : "";
    return i`<calcite-shell class="z-index-1" style=${y({ position: this.position })}>${this._getHeader()}<calcite-loader class=${s(e)} .label=${this._translations.fetchingData}></calcite-loader>${this.mapView && this._getFeaturesComponent() || ""}<div class=${`${a} width-100`} slot=footer>${this.allowEditing ? i`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && d ? i`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${u} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${s(o)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && d ? i`<calcite-tooltip class=${s(o)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !l && i`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${l} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${s(o)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s .text=${this._translations.toggleListView} text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${l} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${s(o)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${s(t)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${f} .graphics=${p} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
  }
  async setGraphics() {
    this._features.value && (this.graphics.length > 0 ? (this._layer = this.graphics[0]?.layer, this._editEnabled = this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate, this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "", this._features.value && (this._features.value.open = !0), this._features.value && (this._features.value.features = this.graphics)) : (await this._features.value.clear(), await this._features.value.close()), this._count = this._getCount());
  }
  handleHeaderActions() {
    this.showCopyPasteActions && this._features.value?.headerActions.length === 0 ? (this._features.value.headerActions.addMany(this._getHeaderActions()), this._headerActionsHandle && this._headerActionsHandle.remove(), this._headerActionsHandle = r.on(() => this._features.value, "arcgisTriggerAction", (e) => {
      e.detail.action.id === "copy-features" ? this.copyFeatures.emit({ featuresIds: this.graphics.map((t) => t.getObjectId()), layerId: this._layer?.id }) : e.detail.action.id === "paste-features" && this.pasteFeatures.emit();
    })) : !this.showCopyPasteActions && this._features.value && this._features.value.headerActions.length > 0 && (this._features.value.headerActions.removeAll(), this._headerActionsHandle?.remove(), this._headerActionsHandle = void 0);
  }
  async featuresComponentReady() {
    if (this._features.value) {
      if (this.featuresReferenceId) {
        const e = document.getElementById(this.featuresReferenceId);
        e && (await e.viewOnReady(), this._features.value.referenceElement = e);
      }
      this.handleHeaderActions(), await this.setGraphics(), this._features.value.selectedFeature && this.selectionChanged.emit({
        selectedFeature: [this._features.value.selectedFeature],
        selectedFeatureIndex: this._features.value.selectedFeatureIndex
      }), r.watch(() => this._features.value?.featureMenuOpen, (e) => {
        this._updateCount(), e || (this._showListView = e ?? !1);
      }), r.watch(() => this._features.value?.selectedFeatureIndex, (e) => {
        e !== void 0 && e > -1 && this._features.value?.selectedFeature && this.selectionChanged.emit({
          selectedFeature: [this._features.value.selectedFeature],
          selectedFeatureIndex: this._features.value.selectedFeatureIndex
        });
      }), r.watch(() => this._features.value?.selectedDrillInFeature, (e) => {
        e ? (this._relatedFeature = e, this._navigatedToRelatedFeature = !0) : (this._relatedFeature = void 0, this._navigatedToRelatedFeature = !1);
      });
    }
  }
  _getHeader() {
    return this.isMobile && !this._editRecordOpen ? i`<calcite-panel class="border-width-0" slot=header><calcite-action class="end-border" icon=chevron-left icon-flip-rtl @click=${() => this._closePopup()} scale=s slot=header-actions-start text></calcite-action><span class="font-bold" slot=header-content>${this._mobileTitle}</span></calcite-panel>` : void 0;
  }
  _getFeaturesComponent() {
    const e = this._editRecordOpen ? "display-none" : "";
    return i`<arcgis-features class=${s(e)} .view=${this.mapView} hide-action-bar .hideCloseButton=${!this.showCloseBtn} hide-feature-menu-heading .hideHeading=${this.isMobile} .highlightDisabled=${!this.highlightEnabled} hide-feature-navigation @arcgisReady=${this.featuresComponentReady} @arcgisClose=${() => {
      this.clearSelection.emit();
    }} ${F(this._features)}></arcgis-features>`;
  }
  _getHeaderActions() {
    return [
      new c({
        id: "copy-features",
        title: this._translations.copy,
        className: "copy-features",
        icon: "copy",
        disabled: this.graphics.length === 0
      }),
      new c({
        id: "paste-features",
        title: this._translations.paste,
        className: "paste-features",
        icon: "paste-with-attribute",
        disabled: !this.pasteEnabled
      })
    ];
  }
  _closePopup() {
    this.popupClosed.emit();
  }
  _alertClosed() {
    this._alertOpen = !1;
  }
  _openEditRecord() {
    this._editEnabled ? this._editRecordOpen = !0 : this._alertOpen = !0;
  }
  async _back() {
    await this._features.value?.previous(), await this._updateCount();
  }
  async _next() {
    await this._features.value?.next(), await this._updateCount();
  }
  async _updateCount() {
    const e = this._features.value?.selectedFeatureIndex;
    this._popupUtils && this.mapView && this.mapView.map && e !== void 0 && (this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[e], this.mapView.map)), this._count = this._getCount();
  }
  _getCount() {
    const e = this._features.value?.viewModel && (this._features.value?.viewModel.selectedFeatureIndex + 1).toString() || "", t = this._features.value?.features?.length.toString() || "";
    return this._translations.indexOfTotal.replace("{{index}}", e).replace("{{total}}", t) || "";
  }
  _toggleListView() {
    if (this._showListView = !this._showListView, this._features.value) {
      const e = this._features.value?.selectedFeatureIndex;
      this._features.value.open = !0, this._features.value.featureMenuOpen = this._showListView, this._features.value.features = this.graphics, this._features.value.selectedFeatureIndex = e;
    }
  }
}
_("info-card", x);
export {
  x as InfoCard
};
