/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as n } from "../../chunks/runtime.js";
import { u as c } from "../../chunks/useT9n.js";
import { LitElement as l, nothing as a } from "@arcgis/lumina";
import { useContextConsumer as d } from "@arcgis/lumina/context";
import { C as r } from "../../chunks/interfaces.js";
import { c as h } from "../../chunks/deployAppContexts.js";
import { l as p } from "../../chunks/helpers.js";
import { css as m, html as i } from "lit";
import "@esri/solution-common";
import "@arcgis/core/identity/IdentityManager.js";
import "@arcgis/core/identity/OAuthInfo.js";
import "@arcgis/core/portal/Portal.js";
import "@arcgis/lumina/controllers";
import { createRef as g, ref as u } from "lit-html/directives/ref.js";
const f = m`*[tabindex]:focus-visible{outline:solid 2px var(--calcite-color-brand);outline-offset:2px}.display-flex{display:flex}.align-items-center{align-items:center}.justify-content-center{justify-content:center}.screenshot-container{width:100%;overflow:hidden}.footer{width:100%}.footer-override{--calcite-dialog-footer-space: 0px}.footer-card{width:200px;height:110px;cursor:pointer}.padding-1{padding:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-end-1{padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.padding-top-1{padding-top:1rem}.padding-top-1-2{padding-top:.5rem}.background-black{background-color:var(--calcite-color-surface-4)}calcite-card:hover img{-webkit-filter:brightness(30%);filter:brightness(30%);-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-o-transition:all .1s ease;-ms-transition:all .1s ease;transition:all .1s ease}calcite-card:hover{outline:2px solid var(--calcite-color-brand);box-sizing:border-box;cursor:pointer;padding-bottom:2px}.calcite-card-selected{outline:2px solid var(--calcite-color-brand);box-sizing:border-box;cursor:pointer;padding-bottom:2px}calcite-card:hover .hover-text{opacity:1;color:#fff}.hover-text{transition:.1s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%;font-size:var(--calcite-spacing-lg)}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.footer-card img{background-color:var(--calcite-color-surface-2)}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip;display:block;object-fit:contain}`;
class b extends l {
  constructor() {
    super(...arguments), this.open = !1, this._screenshots = [], this._translations = c({ name: "solution-snapshot-gallery", blocking: !0 }), this._configContextConsumer = d({
      context: h,
      subscribe: !0
    }), this._displayText = "", this._paginationControl = g(), this._screenshotNames = [];
  }
  static {
    this.properties = { card: 0, screenshot: 0, itemProperties: 0, open: 5, _screenshots: 16, _translations: 16 };
  }
  static {
    this.styles = f;
  }
  willUpdate(t) {
    t.has("screenshot") && this.screenshot && (this._displayText = this.screenshot.description || this.screenshot.alt), t.has("itemProperties") && this.itemProperties && (this._screenshots = this.itemProperties.preview.filter((e) => e.format === "image"), this._screenshotNames = this._screenshots.map((e) => e.name));
  }
  render() {
    return i`<calcite-dialog class="footer-override" .heading=${this.card?.title} modal @calciteDialogClose=${() => this.open = !1} .open=${this.open} outside-close-disabled width=l>${this._getScreenshotView()}${this._getFooter()}</calcite-dialog>`;
  }
  _getScreenshotView() {
    return this.screenshot ? i`<div class="display-flex justify-content-center screenshot-container">${this._getImage(this.screenshot)}</div>` : "";
  }
  _getFooter() {
    const t = this._screenshotNames.indexOf(this.screenshot?.name || ""), o = document.body.classList.contains("calcite-mode-dark") ? "calcite-mode-dark" : "";
    return i`<div class="footer" slot=footer><div class=${`display-flex align-items-center padding-start-1 padding-top-1-2 background-black ${o}`}><calcite-label layout=inline><calcite-pagination class="padding-end-1" @calcitePaginationChange=${this._changeScreenshot} page-size=1 start-item=${t + 1} total-items=${this._screenshots.length ?? a} ${u(this._paginationControl)}></calcite-pagination><span aria-live=polite tabindex=0>${this._displayText}</span></calcite-label></div>${this._getCards()}</div>`;
  }
  _changeScreenshot() {
    this.screenshot = this._screenshots[this._paginationControl.value.startItem - 1];
  }
  _getCards() {
    return i`<calcite-card-group class="card-group padding-1" .label=${this._translations.seeSolutionScreenshots} selection-mode=single>${this._screenshots.map((t) => {
      const e = t.name === this.screenshot?.name;
      return i`<calcite-card class=${`footer-card ${e ? "calcite-card-selected" : ""}`} .label=${t.alt} @click=${() => this._showScreenshot(t)} @keydown=${(s) => p(s, () => this._showScreenshot(t))} .selected=${e}><div class="card-image-wrap" slot=thumbnail>${this._getImage(t, "thumbnail")}<div class="hover-text">${this._translations.viewScreenshot}</div></div></calcite-card>`;
    })}</calcite-card-group>`;
  }
  _getImage(t, e) {
    return i`<img alt=${t.alt ?? a} slot=${e ?? a} src=${this._getSource(this._configContextConsumer.value.authentication, this.card?.id || "", t.name) ?? a}>`;
  }
  _showScreenshot(t) {
    this.screenshot = t;
  }
  _getSource(t, e, o) {
    const s = this._configContextConsumer.value;
    return s.agoBasedEnterpriseSolutionsGroupId && s.isEnterprise ? r(e || "", o, void 0, s.agolPortalUrl) : t ? r(e || "", o, t) : "";
  }
}
n("solution-snapshot-gallery", b);
export {
  b as SolutionSnapshotGallery
};
