/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { P as PopupUtils } from "../../chunks/popupUtils.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { css, nothing, html } from "lit";
import { LitElement, createEvent, noShadowRoot, safeStyleMap, safeClassMap } from "@arcgis/lumina";
import Features from "@arcgis/core/widgets/Features";
import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
const styles = css`@layer{
/** @license
 * Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:host {
  display: block;
  --calcite-label-margin-bottom: 0;
}

.padding-1-2 {
  padding: 0.5rem;
}

.display-none {
  display: none !important;
}

.display-flex {
  display: flex;
}

.position-absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

.feature-node {
  position: relative !important;
}

.feature-node .esri-features__footer {
  display: none !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: 0.5rem !important;
  background-color: var(--calcite-color-foreground-1) !important;
  height: 100% !important;
}

.end-border {
  border-inline-end: 1px solid var(--calcite-color-border-1);
}

.font-bold {
  font-weight: bold;
}

.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: bold;
}
}`;
class InfoCard extends LitElement {
  constructor() {
    super();
    this.enableEditGeometry = false;
    this.enableSnapping = false;
    this.graphics = [];
    this.isLoading = false;
    this.isMobile = false;
    this.allowEditing = false;
    this.highlightEnabled = true;
    this.paginationEnabled = true;
    this.position = "absolute";
    this.showCloseBtn = false;
    this._alertOpen = false;
    this._count = "";
    this._editRecordOpen = false;
    this._isMultipleEdits = false;
    this._mobileTitle = "";
    this._showListView = false;
    this._translations = useT9n({ name: "info-card", blocking: true });
    this._navigatedToRelatedFeature = false;
    this._editEnabled = false;
    this._featuresNodeId = `features-node${(/* @__PURE__ */ new Date()).getMilliseconds().toString()}`;
    this.popupClosed = createEvent();
    this.clearSelection = createEvent();
    this.selectionChanged = createEvent();
    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, {}, { type: Boolean }], enableSnapping: [5, {}, { type: Boolean }], graphics: [0, {}, { attribute: false }], isLoading: [5, {}, { type: Boolean }], isMobile: [5, {}, { type: Boolean }], mapView: [0, {}, { attribute: false }], allowEditing: [5, {}, { type: Boolean }], highlightEnabled: [5, {}, { type: Boolean }], paginationEnabled: [5, {}, { type: Boolean }], position: 1, showCloseBtn: [5, {}, { type: Boolean }], _alertOpen: [16, {}, { state: true }], _count: [16, {}, { state: true }], _editRecordOpen: [16, {}, { state: true }], _isMultipleEdits: [16, {}, { state: true }], _mobileTitle: [16, {}, { state: true }], _showListView: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _navigatedToRelatedFeature: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  static {
    this.shadowRootOptions = noShadowRoot;
  }
  willUpdate(changes) {
    if (changes.has("graphics")) {
      void this.graphicsWatchHandler();
    }
    if (changes.has("isMobile")) {
      void this.isMobileWatchHandler();
    }
    if (changes.has("mapView")) {
      void this.mapViewWatchHandler();
    }
    if (changes.has("_translations")) {
      const newLang = this._translations._lang;
      const oldLang = changes.get("_translations")?._lang;
      if (newLang && oldLang && newLang !== oldLang) {
        if (this._features) {
          const graphics = [...this.graphics];
          this.graphics = [];
          this.graphics = graphics;
        }
      }
    }
  }
  async graphicsWatchHandler() {
    if (this._navigatedToRelatedFeature && this._features) {
      this._features.clear();
      this._features.close();
      this._count = "";
      this._navigatedToRelatedFeature = false;
    }
    await this.setGraphics();
  }
  async isMobileWatchHandler() {
    await this._initFeaturesWidget();
  }
  async mapViewWatchHandler() {
    return await this._initFeaturesWidget();
  }
  async getSelectedFeature() {
    return this._features?.selectedFeature;
  }
  async refresh() {
    await this.setGraphics();
  }
  async back() {
    this._features?.previous();
    this._count = this._getCount();
  }
  async next() {
    this._features?.next();
    this._count = this._getCount();
  }
  async toggleListView() {
    this._showListView = !this._showListView;
    if (this._features) {
      const i = this._features.selectedFeatureIndex;
      this._features.open({
        features: this.graphics,
        featureMenuOpen: this._showListView
      });
      this._features.selectedFeatureIndex = i;
    }
  }
  async updateCurrentGraphic(selectedGraphic) {
    if (this._features?.selectedFeatureWidget) {
      console.log(selectedGraphic);
    }
  }
  async closeEdit() {
    this._editRecordOpen = false;
    this._isMultipleEdits = false;
  }
  async layerSelectionChange() {
    this._showListView = false;
    if (this._features?.viewModel) {
      this._features.viewModel.featureMenuOpen = false;
      this._features.close();
    }
  }
  async refreshGraphics(_evt) {
    if (!this._navigatedToRelatedFeature) {
      this.graphics = [..._evt.detail];
    }
  }
  async editMultipleFeatures(_evt) {
    this._isMultipleEdits = true;
    this._openEditRecord();
  }
  async selectedLanguageUpdated(_evt) {
    this._features?.clear();
    this._features?.close();
    await this._initFeaturesWidget();
  }
  async load() {
    this._popupUtils = new PopupUtils();
  }
  async loaded() {
    if (this.graphics?.length > 0) {
      await this.setGraphics();
    }
  }
  render() {
    const loadingClass = this.isLoading ? "" : "display-none";
    const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
    const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
    const editButtonClass = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "";
    const nextBackDisabled = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature;
    const id = Number(this._features?.selectedFeature?.getObjectId());
    const ids = Number.isNaN(id) ? [] : [id];
    const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
    const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;
    const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
    const toolTipClass = this.isMobile ? "display-none" : "";
    return html`<calcite-shell class="z-index-1" style=${safeStyleMap({ position: this.position })}>${this._getHeader()}<calcite-loader class=${safeClassMap(loadingClass)} .label=${this._translations.fetchingData}></calcite-loader><div class=${safeClassMap("esri-widget feature-node " + featureNodeClass)} id=${this._featuresNodeId ?? nothing}></div><div class=${`${editButtonClass} width-100`} slot=footer>${this.allowEditing ? html`<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 && deleteEnabled ? html`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${ids} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${safeClassMap(toolTipClass)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && deleteEnabled ? html`<calcite-tooltip class=${safeClassMap(toolTipClass)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !nextBackDisabled && html`<div class=${`display-flex padding-1-2 button-container top-border`}><div><calcite-button appearance=transparent .disabled=${nextBackDisabled} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${safeClassMap(toolTipClass)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s text text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${nextBackDisabled} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${safeClassMap(toolTipClass)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${safeClassMap(editClass)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${selectedFeatureIndex} .graphics=${graphics} .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() {
    if (!this._features) {
      await this._initFeaturesWidget();
    }
    if (this.graphics.length > 0) {
      this._layer = this.graphics[0]?.layer;
      this._editEnabled = this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate ? true : false;
      this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "";
      this._features?.open({
        features: this.graphics
      });
    } else {
      this._features?.clear();
      this._features?.close();
    }
    this._count = this._getCount();
  }
  async _initFeaturesWidget() {
    return this.isMobile !== void 0 ? await this.mapView?.when(() => {
      if (!this._features) {
        this._features = new Features({
          view: this.mapView,
          container: this._featuresNodeId,
          visibleElements: {
            actionBar: false,
            closeButton: this.showCloseBtn,
            featureMenuHeading: false,
            heading: !this.isMobile
          }
        });
        if (this._features) {
          this._features.viewModel.highlightEnabled = this.highlightEnabled ? true : false;
          reactiveUtils.watch(() => (this._features?.viewModel).featureMenuOpen, (isOpen) => {
            void this._updateCount();
            if (!isOpen) {
              this._showListView = isOpen;
            }
          });
          reactiveUtils.watch(() => this._features?.selectedFeatureIndex, (i) => {
            if (i !== void 0 && i > -1) {
              if (this._features?.selectedFeature) {
                this.selectionChanged.emit({
                  selectedFeature: [this._features.selectedFeature],
                  selectedFeatureIndex: this._features.selectedFeatureIndex
                });
              }
            }
          });
          reactiveUtils?.watch(() => this._features.selectedDrillInFeature, (f) => {
            if (f) {
              this._relatedFeature = f;
              this._navigatedToRelatedFeature = true;
            } else {
              this._relatedFeature = void 0;
              this._navigatedToRelatedFeature = false;
            }
          });
          const infoCard = this.el.querySelector("#" + this._featuresNodeId);
          this.listenOn(infoCard, "calciteFlowItemClose", () => {
            this.clearSelection.emit();
          });
        }
      } else {
        this._features.view = this.mapView;
        this._features.visibleElements.actionBar = false;
        this._features.visibleElements.closeButton = this.showCloseBtn ? true : false;
        this._features.visibleElements.heading = !this.isMobile;
      }
    }) : Promise.resolve();
  }
  _getHeader() {
    return this.isMobile && !this._editRecordOpen ? html`<calcite-panel class="border-width-0" slot=header><calcite-action appearance=solid 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;
  }
  _closePopup() {
    this.popupClosed.emit();
  }
  _alertClosed() {
    this._alertOpen = false;
  }
  _openEditRecord() {
    if (this._editEnabled) {
      this._editRecordOpen = true;
    } else {
      this._alertOpen = true;
    }
  }
  async _back() {
    this._features?.previous();
    await this._updateCount();
  }
  async _next() {
    this._features?.next();
    await this._updateCount();
  }
  async _updateCount() {
    const i = this._features?.selectedFeatureIndex;
    if (this._popupUtils && this.mapView && this.mapView.map && i !== void 0) {
      this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[i], this.mapView.map);
    }
    this._count = this._getCount();
  }
  _getCount() {
    const index = this._features?.viewModel && (this._features?.viewModel.selectedFeatureIndex + 1).toString() || "";
    const total = this._features?.features?.length.toString() || "";
    return this._translations.indexOfTotal.replace("{{index}}", index).replace("{{total}}", total) || "";
  }
  _toggleListView() {
    this._showListView = !this._showListView;
    if (this._features) {
      const i = this._features.selectedFeatureIndex;
      this._features.open({
        features: this.graphics,
        featureMenuOpen: this._showListView
      });
      this._features.selectedFeatureIndex = i;
    }
  }
}
customElement("info-card", InfoCard);
export {
  InfoCard
};
