/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { a as queryFeaturesByID } from "../../chunks/queryUtils.js";
import { g as getLayerOrTable } from "../../chunks/mapViewUtils.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { createRef, ref } from "lit-html/directives/ref.js";
import { LitElement, createEvent, noShadowRoot } from "@arcgis/lumina";
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 !important;
}

.display-none {
  display: none;
}

.padding-1 {
  padding: 1rem;
}

.position-relative {
  position: relative;
}

.overflow-auto {
  overflow: auto;
}

.height-full {
  height: 100%;
}

.position-static {
  position: static !important;
}

.z-index-500 {
  z-index: 500 !important;
}

card-manager {
  display: block;
}
}`;
class CardManager extends LitElement {
  constructor() {
    super();
    this.customInfoText = "";
    this.enableEditGeometry = false;
    this.enableSnapping = false;
    this.isMobile = false;
    this.zoomAndScrollToSelected = false;
    this.selectedFeaturesIds = [];
    this.enableCreateFeatures = true;
    this.createBtnLabel = "";
    this.selectingFeatureFromMap = false;
    this.showSketchWidgets = false;
    this._cardLoading = false;
    this._graphics = [];
    this._showCreateFeatureComponent = false;
    this._showSubmitBtn = false;
    this._translations = useT9n({ name: "card-manager", blocking: true });
    this._isFeatureCreated = false;
    this._createFeature = createRef();
    this.createWorkFlowStarted = createEvent();
    this.backFromCreateWorkFlow = createEvent();
    this.featureOrRecordSubmitted = createEvent();
    this.listenOn(window, "featureSelectionChange", this.featureSelectionChange);
    this.listenOn(window, "layerSelectionChange", this.layerSelectionChange);
    this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled);
  }
  static {
    this.properties = { customInfoText: 1, enableEditGeometry: [5, {}, { type: Boolean }], enableSnapping: [5, {}, { type: Boolean }], isMobile: [5, {}, { type: Boolean }], layerOrTable: [0, {}, { attribute: false }], mapView: [0, {}, { attribute: false }], zoomAndScrollToSelected: [5, {}, { type: Boolean }], selectedFeaturesIds: [0, {}, { attribute: false }], enableCreateFeatures: [5, {}, { type: Boolean }], createBtnLabel: 1, selectingFeatureFromMap: [5, {}, { type: Boolean }], showSketchWidgets: [5, {}, { type: Boolean }], _cardLoading: [16, {}, { state: true }], _graphics: [16, {}, { state: true }], _showCreateFeatureComponent: [16, {}, { state: true }], _showSubmitBtn: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  static {
    this.shadowRootOptions = noShadowRoot;
  }
  async featureSelectionChange(_evt) {
    if (this._showCreateFeatureComponent && !this._isFeatureCreated) {
      void this._backFromCreateFeature();
    }
    const ids = _evt.detail;
    this._graphics = await this._getFeaturesByIds(ids);
  }
  async layerSelectionChange(_evt) {
    if (this._showCreateFeatureComponent) {
      void this._backFromCreateFeature();
    }
    const id = _evt.detail[0];
    this.layerOrTable = this.mapView ? await getLayerOrTable(this.mapView, id) : void 0;
  }
  async relatedRecordToggled(_evt) {
    const layer = _evt.detail;
    this.layerOrTable = layer;
  }
  async load() {
    if (this.selectedFeaturesIds?.length > 0) {
      this._graphics = await this._getFeaturesByIds(this.selectedFeaturesIds);
    }
  }
  render() {
    const featuresClass = this._graphics?.length > 0 ? "" : "display-none";
    const createFeatureClass = this._graphics?.length === 0 && this._showCreateFeatureComponent ? "" : "display-none";
    const messageClass = this._graphics?.length > 0 || this._showCreateFeatureComponent ? "display-none" : "";
    const isTable = this.layerOrTable?.isTable;
    const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
    const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layerOrTable?.capabilities?.operations?.supportsAdd;
    const createText = this.createBtnLabel ? this.createBtnLabel : isTable ? this._translations.createRecord : this._translations.createFeature;
    const btnDisabled = !this.layerOrTable;
    const enableSnapping = this.enableSnapping && !this.layerOrTable?.isTable;
    return html`<div class="overflow-auto height-full"><calcite-shell class=${`position-relative ${featuresClass}`}><div class="position-static z-index-500 height-full"><info-card .allowEditing=${this.layerOrTable?.editingEnabled} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${enableSnapping} .graphics=${this._graphics} .isLoading=${this._cardLoading} .isMobile=${this.isMobile} .mapView=${this.mapView} position=relative show-close-btn></info-card></div></calcite-shell><calcite-shell class=${`position-relative ${messageClass}`}><calcite-panel><div class=padding-1><calcite-notice .icon=${this.selectingFeatureFromMap ? "map" : "table"} icon-flip-rtl open><div slot=message>${guideMsg}</div></calcite-notice></div>${!this.isMobile && showCreateFeatureOrRecordBtn && html`<calcite-button .disabled=${btnDisabled} @click=${() => this._createFeatureBtnClicked()} slot=footer width=full>${createText}</calcite-button>` || ""}</calcite-panel></calcite-shell><calcite-shell class=${`position-relative ${createFeatureClass}`}><calcite-flow-item selected><calcite-panel .heading=${createText}><calcite-action appearance=solid class="back-button hydrated" icon=chevron-left @click=${this._backFromCreateFeature} scale=s slot=header-actions-start text></calcite-action>${this.getEditorComponent()}${this._showSubmitBtn && html`<calcite-button appearance=solid class="footer-top-button footer-button" @click=${() => this._createFeature.value && void this._createFeature.value.submit()} slot=footer width=full>${this._translations.create}</calcite-button>` || ""}</calcite-panel></calcite-flow-item></calcite-shell></div>`;
  }
  getEditorComponent() {
    const enableSnapping = this.enableSnapping && !this.layerOrTable?.isTable && this.enableCreateFeatures;
    return html`<div>${this._showCreateFeatureComponent && html`<create-feature customize-submit .enableSnapping=${enableSnapping} .mapView=${this.mapView} .isMobile=${this.isMobile} @drawComplete=${() => {
      this._showSubmitBtn = true;
    }} @editingAttachment=${(_evt) => {
      this._showSubmitBtn = !_evt.detail;
    }} @progressStatus=${() => {
      setTimeout(() => {
        this._isFeatureCreated = false;
      }, 2e3);
    }} @success=${this._featureCreated} .showSketchWidgets=${this.showSketchWidgets} .selectedLayerId=${this.layerOrTable?.id} .showLayerVisibilityMsg=${this.layerOrTable?.visible === false} ${ref(this._createFeature)}></create-feature>` || ""}</div>`;
  }
  async _getFeaturesByIds(ids) {
    const featureSet = ids.length > 0 && this.layerOrTable && this.mapView ? await queryFeaturesByID(ids, this.layerOrTable, [], true, this.mapView?.spatialReference) : [];
    return featureSet.sort((a, b) => ids.indexOf(Number(a.getObjectId())) - ids.indexOf(Number(b.getObjectId())));
  }
  _createFeatureBtnClicked() {
    this._showCreateFeatureComponent = true;
    this.createWorkFlowStarted.emit();
  }
  async _backFromCreateFeature() {
    if (this._createFeature.value) {
      this._showCreateFeatureComponent = false;
      this.backFromCreateWorkFlow.emit();
    }
    this._showSubmitBtn = false;
  }
  _featureCreated() {
    this._showCreateFeatureComponent = false;
    this._showSubmitBtn = false;
    this._isFeatureCreated = true;
    this.featureOrRecordSubmitted.emit();
    setTimeout(() => {
      this._showCreateFeatureComponent = true;
    }, 50);
  }
}
customElement("card-manager", CardManager);
export {
  CardManager
};
