/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { u as useT9n } from "../../chunks/useT9n.js";
import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
import { useContextConsumer } from "@arcgis/lumina/context";
import { c as configContext } from "../../chunks/deployAppContexts.js";
import { T as TELEMETRY_CATEGORY } from "../../chunks/interfaces.js";
import { c as convertTitleToUrlForm } from "../../chunks/cardsHelpers.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.
 */

calcite-card {
  height: 100%;
  padding-bottom: 2px;
}

/* @media (max-width: 600px) {
  calcite-card {
    width: calc(100% / 2 - .5rem);
  }
} */

@media (max-width: 400px) {
  calcite-card {
    width: 100%;
  }
}

calcite-card:hover img {
  /* TODO check in dark mode */
  -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: #ffffff;
}

calcite-card:hover {
  outline: 2px solid var(--calcite-color-brand);
  box-sizing: border-box;
  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: 0.5rem;
  margin-bottom: 0.7rem;
}

.info-icon {
  /* TODO check in dark mode...likely just want to set this to #FFFFFF */
  --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 SolutionDetailsCard extends LitElement {
  constructor() {
    super(...arguments);
    this.referrerSolutionId = "";
    this.referrerSolutionTitle = "";
    this.referrerSolutionVersion = "";
    this.source = "all-solutions";
    this._translations = useT9n({ name: "solution-details-card", blocking: true });
    this._configContextConsumer = useContextConsumer({
      context: configContext,
      subscribe: true
    });
    this.detailsCardSelected = createEvent();
  }
  static {
    this.properties = { card: [0, {}, { attribute: false }], referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  get _telemetry() {
    return this._configContextConsumer.value?.telemetrySession;
  }
  render() {
    const href = convertTitleToUrlForm(this.card.title);
    return html`<a href=${href ?? nothing} @click=${this._anchorClick} .title=${`${this._translations.arcgisSolutions} | ${this.card.title}`}>${this._renderCard()}</a>`;
  }
  _anchorClick(evt) {
    evt.preventDefault();
  }
  _cardSelected() {
    const isRelatedSolution = this.source === "you-may-also-like";
    if (isRelatedSolution) {
      const dimensions = [
        this.referrerSolutionTitle,
        this.referrerSolutionId,
        this.referrerSolutionVersion,
        this.card?.title || "",
        this.card?.deployCommonId || "",
        this.card?.deployVersion || ""
      ];
      this._telemetry?.logEvent({
        category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,
        action: "Related Solution",
        dimensions
      });
    }
    this.detailsCardSelected.emit(this.card);
  }
  _renderChips(chips) {
    const deployedChip = chips.includes("deployed");
    const otherChips = chips.filter((chip) => chip !== "deployed");
    const renderedChips = [];
    otherChips.forEach((chip) => {
      const chipClass = "chip-status";
      const chipId = `solution-details-card-chip-${chip}`;
      const chipIcon = chip === "new" ? "star" : "mega-phone";
      const chipTooltip = chip === "new" ? this._translations.newSolution : this._translations.updated;
      renderedChips.push(html`<calcite-chip class=${safeClassMap(chipClass)} .icon=${chipIcon} id=${chipId ?? nothing} .label=${chipTooltip} .value=${chipTooltip} scale=s></calcite-chip><calcite-tooltip .referenceElement=${chipId}><span>${chipTooltip}</span></calcite-tooltip>`);
    });
    if (deployedChip) {
      renderedChips.push(html`<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>`);
    }
    return renderedChips;
  }
  _renderCard() {
    const card = this.card;
    return html`<calcite-card .label=${card.snippet} @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${card.title ?? nothing} class="thumbnail card-image" src=${card.thumbnailUrl ?? nothing}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${card.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${card.snippet}</p>${card.chips && card.chips.length > 0 ? html`<div slot=footer-end style="display: flex; gap: 0.5rem; justify-content: flex-end;">${this._renderChips(card.chips)}</div>` : void 0}<div slot=footer-start></div></calcite-card>`;
  }
}
customElement("solution-details-card", SolutionDetailsCard);
export {
  SolutionDetailsCard
};
