/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as h } from "../../chunks/runtime.js";
import { css as p, html as o } from "lit";
import { u as m } from "../../chunks/useT9n.js";
import { LitElement as u, createEvent as f, nothing as r, safeClassMap as g } from "@arcgis/lumina";
import { useContextConsumer as b } from "@arcgis/lumina/context";
import { A as x, T as v, J as y } from "../../chunks/interfaces.js";
import { c as $ } from "../../chunks/cardsHelpers.js";
const _ = p`calcite-card{height:100%;padding-bottom:2px;border:2px solid transparent;transition:border-color .1s ease;box-sizing:border-box}@media(max-width:400px){calcite-card{width:100%}}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 .hover-text{opacity:1;color:#fff}calcite-card:hover{border-color:var(--calcite-color-brand);cursor:pointer}.chip-status{--calcite-chip-icon-color: var(--calcite-color-brand);cursor:pointer}.chip-deployed{--calcite-chip-icon-color: var(--calcite-color-status-success)}.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:1.2rem}.font-color-text-2{--calcite-label-text-color: var(--calcite-color-text-2)}.font-line-height{line-height:1.4}.font-size-size--1{font-size:var(--calcite-font-size--1)}.header-line-height{--calcite-label-margin-bottom: 0;margin-top:.5rem;margin-bottom:.7rem}.info-icon{--calcite-icon-color: var(--calcite-color-text-inverse);padding-inline-end:.3rem}.card-image-wrap{flex:0 0 auto}.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}a{text-decoration:none;color:inherit;outline:0;padding:0;margin:0;display:inherit;height:100%}`;
class C extends u {
  constructor() {
    super(...arguments), this.referrerSolutionId = "", this.referrerSolutionTitle = "", this.referrerSolutionVersion = "", this.source = "all-solutions", this._translations = m({ name: "solution-details-card", blocking: !0 }), this._configContextConsumer = b({
      context: x,
      subscribe: !0
    }), this.detailsCardSelected = f();
  }
  static {
    this.properties = { card: 0, referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: 16 };
  }
  static {
    this.styles = _;
  }
  get _telemetry() {
    return this._configContextConsumer.value?.telemetrySession;
  }
  render() {
    const e = $(this.card.title);
    return o`<a href=${e ?? r} @click=${this._anchorClick} tabindex=-1 .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
  }
  _anchorClick(e) {
    e.preventDefault();
  }
  _cardSelected() {
    if (this.source === "you-may-also-like") {
      const t = [
        this.referrerSolutionTitle,
        this.referrerSolutionId,
        this.referrerSolutionVersion,
        this.card?.title || "",
        this.card?.deployCommonId || "",
        this.card?.deployVersion || ""
      ];
      this._telemetry?.logEvent({
        category: v.SOLUTION_DETAILS,
        action: "Related Solution",
        dimensions: t
      });
    }
    this.detailsCardSelected.emit(this.card);
  }
  _renderChips(e) {
    const t = e.includes("deployed"), c = e.filter((i) => i !== "deployed"), s = [];
    return c.forEach((i) => {
      const n = "chip-status", l = `solution-details-card-chip-${i}`, d = i === "new" ? "star" : "mega-phone", a = i === "new" ? this._translations.newSolution : this._translations.updated;
      s.push(o`<calcite-chip class=${g(n)} .icon=${d} id=${l ?? r} .label=${a} .value=${a} scale=s></calcite-chip><calcite-tooltip .referenceElement=${l}><span>${a}</span></calcite-tooltip>`);
    }), t && s.push(o`<calcite-chip class="chip-deployed" icon=check-circle id=solution-details-card-chip-deployed .label=${this._translations.deployed} .value=${this._translations.deployed} scale=s></calcite-chip><calcite-tooltip reference-element=solution-details-card-chip-deployed><span>${this._translations.deployed}</span></calcite-tooltip>`), s;
  }
  _renderCard() {
    const e = this.card;
    return o`<calcite-card .label=${e.snippet} @click=${this._cardSelected} @keydown=${(t) => y(t, () => this._cardSelected())}><div class="card-image-wrap" slot=thumbnail><img alt=${e.title ?? r} class="thumbnail card-image" src=${e.thumbnailUrl ?? r}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${e.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${e.snippet}</p>${e.chips && e.chips.length > 0 ? o`<div slot=footer-end style="display: flex; gap: 0.5rem; justify-content: flex-end;">${this._renderChips(e.chips)}</div>` : void 0}<div slot=footer-start></div></calcite-card>`;
  }
}
h("solution-details-card", C);
export {
  C as SolutionDetailsCard
};
