/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as o } from "../../chunks/runtime.js";
import { css as c, html as t } from "lit";
import { keyed as r } from "lit/directives/keyed.js";
import { u as h } from "../../chunks/useT9n.js";
import { LitElement as d, createEvent as a } from "@arcgis/lumina";
import { createRef as i, ref as l } from "lit-html/directives/ref.js";
const u = c`*[tabindex]:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.panel-bg-white{--calcite-panel-background-color: var(--calcite-color-surface-2)}calcite-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.loader-text{margin-top:var(--calcite-spacing-sm);margin-bottom:var(--calcite-spacing-xxxl);text-align:center;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-1)}.carousel-style{height:120px;display:flex;align-items:center}`;
class m extends d {
  constructor() {
    super(), this.deploymentProgress = 0, this.open = !1, this.isWaitingForCard = !1, this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1, this._showIsCancelling = !1, this._translations = h({ name: "solution-deploying-dialog", blocking: !0 }), this._carouselKey = 0, this._deployingDialogRef = i(), this._carouselRef = i(), this._carouselMessages = [], this._confirmUnload = !1, this.deployingDialogOpened = a(), this.deploymentProcessCancelled = a(), this.listenOn(window, "beforeunload", (e) => {
      (this._confirmUnload || this._showIsCancelling) && (e.preventDefault(), e.returnValue = !0);
    });
  }
  static {
    this.properties = { abortController: 0, card: 0, deploymentProgress: 9, open: 5, isWaitingForCard: 5, _isInCancelConfirmation: 16, _showCancelConfirmation: 16, _showIsCancelling: 16, _translations: 16, _carouselKey: 16 };
  }
  static {
    this.styles = u;
  }
  close() {
    this._showCancelConfirmation = !1, this._showIsCancelling = !1, this._isInCancelConfirmation = !1, this.isWaitingForCard = !1;
    const e = this._deployingDialogRef.value;
    e && (e.open = !1), this.open = !1;
  }
  confirmCancel() {
    const e = this._deployingDialogRef.value;
    e && (e.open = !0, e.closeDisabled = !0, this._isInCancelConfirmation = !0, this._showIsCancelling = !1), this._showCancelConfirmation = !0;
  }
  cancelDeployment() {
    this._isInCancelConfirmation && this.abortController && (this._showIsCancelling = !0, this._showCancelConfirmation = !1, this._isInCancelConfirmation = !1, this.deploymentProcessCancelled.emit(), this.abortController.abort());
  }
  async load() {
  }
  render() {
    return t`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} escape-disabled modal width=m .open=${this.open} @calciteDialogBeforeClose=${(e) => {
      e.preventDefault(), this._confirmUnload = !1;
    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${l(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : t`<calcite-panel class="panel-bg-white">${this.isWaitingForCard ? t`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=indeterminate></calcite-loader><div class="loader-text" role=status tabindex=0>${this._translations.deploymentInProgress}</div>` : t`<calcite-loader .label=${this._translations.deploymentInProgress} scale=l type=determinate-value .value=${this.deploymentProgress}></calcite-loader><div class="loader-text" role=status tabindex=0>${this._translations.deploymentInProgress}</div>`}<div class="carousel-style">${r(this._carouselKey, t`<calcite-carousel .label=${this._translations.newsAndFeatures} arrow-type=inline ${l(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div></calcite-panel>`}${!this._showCancelConfirmation && !this._showIsCancelling && t`<calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button>` || ""}${this._showCancelConfirmation && t`<calcite-button kind=brand @click=${() => {
      this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1;
    }} 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 e = [];
    return this._carouselMessages.forEach((s, n) => {
      e.push(t`<calcite-carousel-item .label=${`carousel-item-${n}`}><calcite-label layout=inline scale=m>${s.icon && t`<calcite-icon aria-hidden=true .icon=${s.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(s) ?? ""} tabindex=0></span></calcite-label></calcite-carousel-item>`);
    }), e;
  }
  _getCarouselMessages() {
    const e = this._translations.carousel, s = [
      {
        message: e.stockMessage1,
        //documentation
        icon: "question"
      },
      {
        message: e.stockMessage2,
        //solution diagram
        icon: "model"
      },
      {
        message: e.stockMessage3,
        //rename items
        icon: "lightbulb"
      },
      {
        message: e.stockMessage4,
        //deploy solution
        icon: "information"
      },
      {
        message: e.stockMessage5,
        //solutions assistant
        icon: "speech-bubbles"
      },
      {
        message: e.stockMessage6,
        //versions
        icon: "information"
      }
    ];
    return s.sort(() => Math.random() - 0.5), s;
  }
  _processCarouselMessage(e) {
    let s = e.message || "";
    return s.includes("{{url}}") && e.url && (s = s.replace("{{url}}", e.url)), s;
  }
  renderCancelModal() {
    return t`<calcite-panel class="panel-bg-white"><div tabindex=0>${this._translations.deploymentCancelMessage}</div></calcite-panel>`;
  }
  renderCancellingModal() {
    return t`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment}></calcite-loader><div class="loader-text" role=status tabindex=0>${this._translations.cancelCurrentDeployment}</div></calcite-panel>`;
  }
  _onDialogOpen() {
    this._confirmUnload = !0, this._showCancelConfirmation = !1, this._showIsCancelling = !1, this._isInCancelConfirmation = !1, this._carouselKey++, this._translations.carousel && (this._carouselMessages = this._getCarouselMessages()), this.deployingDialogOpened.emit(), setTimeout(() => {
      const e = this._carouselRef.value;
      e && e.play();
    }, 100);
  }
}
o("solution-deploying-dialog", m);
export {
  m as SolutionDeployingDialog
};
