/* 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 { LitElement, nothing } from "@arcgis/lumina";
import { useContextConsumer } from "@arcgis/lumina/context";
import { a as getItemResourceUrl } from "../../chunks/common.js";
import { c as configContext } from "../../chunks/deployAppContexts.js";
import { css, html } 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 { 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.
 */

.display-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.footer {
  width: 100%;
}

.footer-override {
  --calcite-dialog-footer-space: 0px;
}

.footer-card {
  width: 200px;
  height: 100px;
  cursor: pointer;
  padding-bottom: 2px;
}

.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-foreground-3);
}

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;
}

.calcite-card-selected {
  /* border: 2px solid var(--calcite-card-accent-color-selected, var(--calcite-color-brand)); */
    outline: 2px solid var(--calcite-color-brand);
  box-sizing: border-box;
  cursor: pointer;
}

calcite-card:hover .hover-text {
  opacity: 1;
  color: #ffffff;
}

.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;
}

.card-image {
  width: 100%;
  display: block;
}

video,
img {
  max-width: 100%;
  height: auto;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
  display: block;
}`;
class SolutionSnapshotGallery extends LitElement {
  constructor() {
    super(...arguments);
    this.open = false;
    this._screenshots = [];
    this._translations = useT9n({ name: "solution-snapshot-gallery", blocking: true });
    this._configContextConsumer = useContextConsumer({
      context: configContext,
      subscribe: true
    });
    this._displayText = "";
    this._paginationControl = createRef();
    this._screenshotNames = [];
  }
  static {
    this.properties = { card: [0, {}, { attribute: false }], screenshot: [0, {}, { attribute: false }], itemProperties: [0, {}, { attribute: false }], open: [5, {}, { type: Boolean }], _screenshots: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  willUpdate(changes) {
    if (changes.has("screenshot") && this.screenshot) {
      this._displayText = this.screenshot.alt;
    }
    if (changes.has("itemProperties") && this.itemProperties) {
      this._screenshots = this.itemProperties.preview.filter((ss) => ss.format === "image");
      this._screenshotNames = this._screenshots.map((s) => s.name);
    }
  }
  render() {
    return html`<calcite-dialog class="footer-override" .heading=${this.card?.title} modal @calciteDialogClose=${() => this.open = false} .open=${this.open} outside-close-disabled width=l>${this._getScreenshotView()}${this._getFooter()}</calcite-dialog>`;
  }
  _getScreenshotView() {
    return this.screenshot ? html`<div class="display-flex justify-content-center">${this._getImage(this.screenshot)}</div>` : "";
  }
  _getFooter() {
    const index = this._screenshotNames.indexOf(this.screenshot?.name || "");
    const isDarkMode = document.body.classList.contains("calcite-mode-dark");
    const themeCss = isDarkMode ? "calcite-mode-dark" : "";
    return html`<div class="footer" slot=footer><div class=${`display-flex align-items-center padding-start-1 padding-top-1-2 background-black ${themeCss}`}><calcite-label layout=inline><calcite-pagination class="padding-end-1" @calcitePaginationChange=${this._changeScreenshot} page-size=1 start-item=${index + 1} total-items=${this._screenshots.length ?? nothing} ${ref(this._paginationControl)}></calcite-pagination>${this._displayText}</calcite-label></div>${this._getCards()}</div>`;
  }
  _changeScreenshot() {
    this.screenshot = this._screenshots[this._paginationControl.value.startItem - 1];
  }
  _getCards() {
    return html`<calcite-card-group class="card-group padding-1" .label=${this._translations.seeSolutionScreenshots} selection-mode=single>${this._screenshots.map((ss) => {
      const selected = ss.name === this.screenshot?.name;
      const selectedStyle = selected ? "calcite-card-selected" : "";
      return html`<calcite-card class=${`footer-card ${selectedStyle}`} .label=${ss.alt} @click=${() => this._showScreenshot(ss)} .selected=${selected}><div class="card-image-wrap" slot=thumbnail>${this._getImage(ss, "thumbnail")}<div class="hover-text">${this._translations.viewScreenshot}</div></div></calcite-card>`;
    })}</calcite-card-group>`;
  }
  _getImage(screenshot, slot) {
    return html`<img alt=${screenshot.alt ?? nothing} slot=${slot ?? nothing} src=${this._getSource(this._configContextConsumer.value.authentication, this.card?.id || "", screenshot.name) ?? nothing}>`;
  }
  _showScreenshot(itemPreview) {
    this.screenshot = itemPreview;
  }
  _getSource(auth, id, name) {
    const context = this._configContextConsumer.value;
    return context.agoBasedEnterpriseSolutionsGroupId && context.isEnterprise ? getItemResourceUrl(id || "", name, void 0, context.agolPortalUrl) : auth ? getItemResourceUrl(id || "", name, auth) : "";
  }
}
customElement("solution-snapshot-gallery", SolutionSnapshotGallery);
export {
  SolutionSnapshotGallery
};
