/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { css, html, nothing } from "lit";
import { LitElement, createEvent } from "@arcgis/lumina";
const styles = css`/** @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;
}`;
class DeleteButton extends LitElement {
  constructor() {
    super(...arguments);
    this.buttonType = "button";
    this.disabled = false;
    this.ids = [];
    this.showDeleteCount = true;
    this._confirmDelete = false;
    this._deleteEndabled = false;
    this._supportsDelete = false;
    this._translations = useT9n({ name: "delete-button", blocking: true });
    this.editsComplete = createEvent();
    this.deleteClicked = createEvent();
  }
  static {
    this.properties = { deleteDialog: 1, buttonType: 1, disabled: [5, {}, { type: Boolean }], icon: 1, ids: [0, {}, { attribute: false }], layer: [0, {}, { attribute: false }], showDeleteCount: [5, {}, { type: Boolean }], _confirmDelete: [16, {}, { state: true }], _deleteEndabled: [16, {}, { state: true }], _supportsDelete: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  willUpdate(changes) {
    if (changes.has("ids") && (this.hasUpdated || this.ids?.length > 0)) {
      void this.idsWatchHandler();
    }
    if (changes.has("layer")) {
      void this.layerWatchHandler();
    }
  }
  async idsWatchHandler() {
    this._setDeleteEnabled();
  }
  async layerWatchHandler() {
    this._setDeleteEnabled();
  }
  render() {
    return html`${this.buttonType === "button" ? html`<calcite-button appearance=outline .disabled=${!this._deleteEndabled} id=solutions-delete kind=danger @click=${() => this._delete()} width=full>${this.showDeleteCount ? this._translations.deleteCount?.replace("{{n}}", this.ids?.length.toString()) : this._translations.delete}</calcite-button>` : html`<calcite-action appearance=solid .disabled=${!this._deleteEndabled} id=${this.icon ?? nothing} @click=${() => this._delete()} scale=s .text=${this._translations.delete}><calcite-button appearance=transparent .iconStart=${this.icon} kind=danger>${this._translations.delete}</calcite-button></calcite-action>`}${this._deleteMessage()}<calcite-tooltip placement=bottom .referenceElement=${this.buttonType === "button" ? "solutions-delete" : this.icon}><span>${this._translations.delete}</span></calcite-tooltip>`;
  }
  loaded() {
    this._setDeleteEnabled();
  }
  _setDeleteEnabled() {
    this._supportsDelete = this.layer?.editingEnabled && this.layer?.capabilities?.operations?.supportsDelete ? true : false;
    this._deleteEndabled = !this.disabled || this._supportsDelete && this.ids?.length > 0;
  }
  _delete() {
    this.deleteClicked.emit();
    this._confirmDelete = true;
  }
  _deleteMessage() {
    return this.deleteDialog ? this.deleteDialog : html`<delete-dialog id=solution-delete-dialog .ids=${this.ids} .layer=${this.layer} @deleteDialogClose=${() => this._confirmDelete = false} .open=${this._confirmDelete}></delete-dialog>`;
  }
}
customElement("delete-button", DeleteButton);
export {
  DeleteButton
};
