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

.panel-bg-white {
  --calcite-panel-background-color: var(--calcite-color-foreground-1);
}`;
class SolutionDeployingDialog extends LitElement {
  constructor() {
    super();
    this.deploymentProgress = 0;
    this.open = false;
    this._isInCancelConfirmation = false;
    this._showCancelConfirmation = false;
    this._showIsCancelling = false;
    this._translations = useT9n({ name: "solution-deploying-dialog", blocking: true });
    this._carouselKey = 0;
    this._deployingDialogRef = createRef();
    this._carouselRef = createRef();
    this._carouselMessages = [];
    this._confirmUnload = false;
    this.deployingDialogOpened = createEvent();
    this.deploymentProcessCancelled = createEvent();
    this.listenOn(window, "beforeunload", (evt) => {
      if (this._confirmUnload || this._showIsCancelling) {
        evt.preventDefault();
        evt.returnValue = true;
      }
    });
  }
  static {
    this.properties = { abortController: [0, {}, { attribute: false }], card: [0, {}, { attribute: false }], deploymentProgress: [9, {}, { type: Number }], open: [5, {}, { type: Boolean }], _isInCancelConfirmation: [16, {}, { state: true }], _showCancelConfirmation: [16, {}, { state: true }], _showIsCancelling: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _carouselKey: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  close() {
    this._showCancelConfirmation = false;
    this._showIsCancelling = false;
    const dialog = this._deployingDialogRef.value;
    if (dialog) {
      dialog.open = false;
    }
    this.open = false;
  }
  confirmCancel() {
    const dialog = this._deployingDialogRef.value;
    if (dialog) {
      dialog.open = true;
      dialog.closeDisabled = true;
      this._isInCancelConfirmation = true;
      this._showIsCancelling = false;
    }
    this._showCancelConfirmation = true;
  }
  cancelDeployment() {
    if (this._isInCancelConfirmation) {
      if (this.abortController) {
        this.deploymentProcessCancelled.emit();
        this.abortController.abort();
        this._showIsCancelling = true;
        this._showCancelConfirmation = false;
      }
    }
  }
  async load() {
  }
  render() {
    return html`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} modal width=m .open=${this.open} @calciteDialogBeforeClose=${(event) => {
      event.preventDefault();
      this._confirmUnload = false;
    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${ref(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : html`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.deploymentInProgress} scale=l .text=${this._translations.deploymentInProgress} type=determinate-value .value=${this.deploymentProgress}></calcite-loader><div style="height: 120px; display: flex; align-items: center;">${keyed(this._carouselKey, html`<calcite-carousel autoplay=paused autoplay-duration=8000 .label=${this._translations.newsAndFeatures} arrow-type=inline ${ref(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div></calcite-panel>`}${!this._showCancelConfirmation && !this._showIsCancelling && html`<calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button>` || ""}${this._showCancelConfirmation && html`<calcite-button kind=brand @click=${() => {
      const dialog = this._deployingDialogRef.value;
      if (dialog) {
        dialog.closeDisabled = false;
      }
      this._isInCancelConfirmation = false;
      this._showCancelConfirmation = false;
    }} slot=footer-end>${this._translations.continueDeployment}</calcite-button><calcite-button appearance=outline @click=${this.cancelDeployment} slot=footer-end>${this._translations.cancelDeploymentButton}</calcite-button>` || ""}</calcite-dialog>`;
  }
  renderCarouselItems() {
    const items = [];
    this._carouselMessages.forEach((carouselMessage, index) => {
      items.push(html`<calcite-carousel-item .label=${`carousel-item-${index}`}><calcite-label layout=inline>${carouselMessage.icon && html`<calcite-icon .icon=${carouselMessage.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(carouselMessage) ?? ""}></span></calcite-label></calcite-carousel-item>`);
    });
    return items;
  }
  _getCarouselMessages() {
    const carousel = this._translations.carousel;
    const messages = [
      {
        message: carousel.stockMessage1,
        //documentation
        icon: "question"
      },
      {
        message: carousel.stockMessage2,
        //solution diagram
        icon: "model"
      },
      {
        message: carousel.stockMessage3,
        //rename items
        icon: "lightbulb"
      },
      {
        message: carousel.stockMessage4,
        //deploy solution
        icon: "information"
      },
      {
        message: carousel.stockMessage5,
        //solutions assistant
        icon: "speech-bubbles"
      },
      {
        message: carousel.stockMessage6,
        //versions
        icon: "information"
      }
    ];
    messages.sort(() => Math.random() - 0.5);
    return messages;
  }
  _processCarouselMessage(carouselMessage) {
    let processedMessage = carouselMessage.message || "";
    if (processedMessage.includes("{{url}}") && carouselMessage.url) {
      processedMessage = processedMessage.replace("{{url}}", carouselMessage.url);
    }
    return processedMessage;
  }
  renderCancelModal() {
    return html`<calcite-panel class="panel-bg-white">${this._translations.deploymentCancelMessage}</calcite-panel>`;
  }
  renderCancellingModal() {
    return html`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment} .text=${this._translations.cancelCurrentDeployment}></calcite-loader></calcite-panel>`;
  }
  _onDialogOpen() {
    this._confirmUnload = true;
    this._carouselKey++;
    if (this._translations.carousel) {
      this._carouselMessages = this._getCarouselMessages();
    }
    this.deployingDialogOpened.emit();
    setTimeout(() => {
      const carousel = this._carouselRef.value;
      if (carousel) {
        carousel.play();
      }
    }, 100);
  }
}
customElement("solution-deploying-dialog", SolutionDeployingDialog);
export {
  SolutionDeployingDialog
};
