/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { repeat } from "lit/directives/repeat.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { LitElement, createEvent, safeStyleMap } from "@arcgis/lumina";
import { useContextConsumer } from "@arcgis/lumina/context";
import { css, html } from "lit";
import { c as configContext, i as isMobileContext } from "../../chunks/deployAppContexts.js";
import { d as EIndustry, c as EDomain, T as TELEMETRY_CATEGORY } from "../../chunks/interfaces.js";
import { createRef, ref } from "lit/directives/ref.js";
import "../solutions-filter-panel/customElement.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;
}

.border-override {
  border-top-width: var(--calcite-border-width-none);
  border-bottom-width: var(--calcite-border-width-none);
}

.header-override {
  --calcite-panel-header-content-space: 0px;
  --calcite-panel-header-background-color: var(--calcite-color-foreground-2);
}

.panel-override {
  --calcite-panel-background-color: var(--calcite-color-foreground-2);
  --calcite-panel-border-color: none;
}

.label-override {
  --calcite-label-margin-bottom: 0px;
  padding-inline-start: var(--calcite-spacing-md);
  font-weight: var(--calcite-font-weight-medium);
}

.header-button-padding {
  padding-top: var(--calcite-spacing-sm);
  padding-bottom: var(--calcite-spacing-sm);
  padding-inline-start: var(--calcite-spacing-lg);
  padding-inline-end: var(--calcite-spacing-lg);
}

.padding-start {
  padding-inline-start: var(--calcite-spacing-lg);
}

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

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

.filter-width-350 {
  --calcite-shell-panel-width: 350px;
}

.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

h1 {
  font-weight: unset;
  margin: 0;
  padding: 0;
}

/* This is tied to a supporting media query in the components code.
If you update this you will need to update or at least consider that code.
 */
@media (max-width: 800px) {
  .filter {
    display: none;
  }
}

.mock-fab {
  --calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);
  box-shadow: var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));
  --calcite-button-background-color: var(--calcite-fab-background-color);
  --calcite-button-border-color: var(--calcite-fab-border-color);
  --calcite-button-text-color: var(--calcite-fab-text-color);
  --calcite-button-loader-color: var(--calcite-fab-loader-color);
}

.background-override {
  --calcite-shell-panel-background-color: var(--calcite-color-foreground-3);
  --calcite-panel-background-color: var(--calcite-color-foreground-3);
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--calcite-spacing-xs);
  flex: 1;
  padding-block: var(--calcite-spacing-xs);
}

.header-content-wrapper {
  min-height: 50px;
  flex-wrap: wrap;
  gap: var(--calcite-spacing-xs);
}

.position-relative {
  position: relative;
}

.height-100 {
  height: 100%;
}

.border-none {
  border: none;
}

.height-50 {
  height: 50px;
}

.padding-top-3 {
  padding-top: 3px;
}`;
class SolutionsAllShell extends LitElement {
  constructor() {
    super();
    this.solutionsCount = 0;
    this._isLoading = true;
    this._filterOpen = true;
    this._filters = {
      categories: [],
      searchTerm: ""
    };
    this._isMobile = false;
    this._translations = useT9n({ name: "solutions-all-shell", blocking: true });
    this._allSolutionsPanelRef = createRef();
    this._solutionsFilterPanelRef = createRef();
    this._configContextConsumer = useContextConsumer({
      context: configContext,
      subscribe: true
    });
    this._isMobileContextConsumer = useContextConsumer({
      context: isMobileContext,
      subscribe: true,
      callback: (value) => this._isMobile = value
    });
    this.filterRemoved = createEvent();
    this.listenOn(window, "searchChanged", (evt) => {
      console.log("searchChanged event received in all solutions shell");
      if (evt.detail && evt.detail.scope === "all-solutions") {
        this._filterApplied(evt.detail.option, evt.detail.logSearchTelemetry);
      }
    });
    this.listenOn(window, "toggleFilter", this._toggleFilter);
    this.listenOn(window, "cardsFetched", () => {
      this._isLoading = false;
    });
  }
  static {
    this.properties = { solutionsCount: [9, {}, { type: Number }], _isLoading: [16, {}, { state: true }], _filterOpen: [16, {}, { state: true }], _filters: [16, {}, { state: true }], _isMobile: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  willUpdate(changes) {
    if (changes.has("_isMobile")) {
      this._filterOpen = !this._isMobile;
    }
  }
  get _telemetry() {
    return this._configContextConsumer.value?.telemetrySession;
  }
  async searchSolutions(searchOptions) {
    console.log("searchSolutions");
    this._allSolutionsPanelRef.value.setSearchOptions(searchOptions);
    if ("industry" in searchOptions || "domain" in searchOptions) {
      searchOptions.displayValue = searchOptions.domain || searchOptions.industry;
      const industryKey = searchOptions.industry ? Object.entries(EIndustry).find(([, val]) => val === searchOptions.industry)?.[0] : void 0;
      const domainKey = searchOptions.domain ? Object.entries(EDomain).find(([, val]) => val === searchOptions.domain)?.[0] : void 0;
      searchOptions.industry = industryKey || "";
      searchOptions.domain = domainKey || "";
      searchOptions.value = domainKey || industryKey || "";
      this._solutionsFilterPanelRef.value.changeIndustryFilter(searchOptions.industry, searchOptions.domain, searchOptions.displayValue, true);
    } else if ("searchTerm" in searchOptions || "sortType" in searchOptions) {
      if ("searchTerm" in searchOptions) {
        this._filters.searchTerm = searchOptions.searchTerm;
      }
      this._allSolutionsPanelRef.value?.searchSolutions(searchOptions);
    }
  }
  async load() {
    if (this._isMobileContextConsumer.value) {
      this._isMobile = this._isMobileContextConsumer.value;
    }
  }
  render() {
    const solutionsCountStyle = this._isMobile ? "justify-content-end" : "";
    const shellDisplayClass = this._isLoading ? "display-none" : "";
    return html`<calcite-shell class=${`position-relative ${shellDisplayClass}`}>${this._isMobile ? "" : this._getFilterPanel()}<h1 class="height-100"><calcite-panel class="border-override header-override panel-override z-index-1"><div class=${`display-flex align-items-center header-content-wrapper ${solutionsCountStyle}`} slot=header-content><calcite-label class="label-override padding-top-3">${this._translations.numberOfSolutions.replace("{{count}}", this.solutionsCount.toString())}</calcite-label><div class="chips-container">${this._renderChips()}${this._filters.categories && this._filters.categories?.length > 0 && html`<calcite-button appearance=transparent icon-start=reset kind=neutral @click=${() => {
      this._filters = {
        ...this._filters,
        categories: []
      };
      this._allSolutionsPanelRef.value?.searchSolutions(this._filters.categories);
      this.filterRemoved.emit([]);
    }} .label=${this._translations.clearIndustryFilter}>${this._translations.clearIndustryFilter}</calcite-button>` || ""}</div></div>${this._isMobile && this._getFilterPanel() || ""}${this._getSolutionsAllPanel()}</calcite-panel></h1></calcite-shell>`;
  }
  _getFilterPanel() {
    const filterOverride = this._filterOpen ? { "display": "flex" } : "";
    return !this._isMobile ? html`<calcite-shell-panel class="filter background-override filter-width-350" id=solutions-all-shell-panel-start slot=panel-start style=${safeStyleMap(filterOverride)}><calcite-panel class="border-none"><solutions-filter-panel class="height-100" @applyFilter=${(evt) => {
      this._filterApplied(evt.detail);
    }} ${ref(this._solutionsFilterPanelRef)}></solutions-filter-panel></calcite-panel></calcite-shell-panel>` : html`<calcite-panel class=${`border-none ${this._filterOpen ? "background-override" : "filter background-override"}`} id=solutions-all-shell-panel-start style=${safeStyleMap(filterOverride)}><solutions-filter-panel class="height-100" @applyFilter=${(evt) => {
      this._filterApplied(evt.detail);
    }} ${ref(this._solutionsFilterPanelRef)}></solutions-filter-panel></calcite-panel>`;
  }
  _getSolutionsAllPanel() {
    const solutionsAllPanelOverride = this._isMobile && this._filterOpen ? { "display": "none" } : "";
    return html`<solutions-all-panel @cardsFetched=${this._updateSolutionCount} style=${safeStyleMap(solutionsAllPanelOverride)} ${ref(this._allSolutionsPanelRef)}></solutions-all-panel>`;
  }
  _renderChips() {
    if (!this._filters.categories) {
      return void 0;
    }
    const onlyIndustry = this._filters.categories.filter((filter) => {
      return filter.type === "industry" || filter.type === "domain";
    });
    return onlyIndustry.length > 0 ? repeat(onlyIndustry, (filter) => `${filter.type}:${filter.value}`, (filter) => {
      return html`<calcite-chip appearance=outline-fill class="padding-start" closable kind=neutral .label=${filter.displayValue} @calciteChipClose=${() => this._chipClosed(filter.displayValue, filter.type)} .value=${filter.displayValue}>${filter.displayValue}</calcite-chip>`;
    }) : void 0;
  }
  _updateSolutionCount(evt) {
    this.solutionsCount = evt.detail;
  }
  _chipClosed(chipValue, chipType) {
    if (!this._filters.categories) {
      return;
    }
    if (chipType === "industry") {
      this._filters.categories = [];
    } else {
      const exsistingFilters = this._filters.categories.filter((filter) => filter.displayValue !== chipValue && filter.type !== chipType);
      this._filters.categories = exsistingFilters;
    }
    if (this._filters.categories.length > 0) {
      this._allSolutionsPanelRef.value?.searchSolutions(this._filters.categories);
    } else {
      if (this._filters.searchTerm !== "") {
        this._allSolutionsPanelRef.value?.searchSolutions(this._filters.categories);
        this._allSolutionsPanelRef.value?.searchSolutions({ searchTerm: this._filters.searchTerm });
      } else {
        this._allSolutionsPanelRef.value?.searchSolutions();
      }
    }
    this.filterRemoved.emit(this._filters.categories);
  }
  _toggleFilter() {
    this._filterOpen = !this._filterOpen;
  }
  _logFilterTelemetry(filter) {
    if ((filter.type === "industry" || filter.type === "domain") && filter.industry) {
      const industryValue = EIndustry[filter.industry];
      const dimensions = [industryValue];
      if (filter.domain) {
        const domainValue = EDomain[filter.domain];
        dimensions.push(domainValue);
      }
      this._telemetry?.logEvent({
        category: TELEMETRY_CATEGORY.ALL_SOLUTIONS,
        action: "Filter",
        dimensions
      });
    }
  }
  _filterApplied(options, logSearchTelemetry) {
    if (!this._filters.categories) {
      return;
    }
    console.log("_filterApplied called with options:", options);
    if (options) {
      let filterToApply = options;
      if ("displayValue" in options) {
        this._filters.categories.push(options);
        this._logFilterTelemetry(options);
      } else {
        if (Array.isArray(options) && options.length > 0) {
          if (options.length >= 2) {
            filterToApply = [options[options.length - 1]];
          }
          this._filters = {
            categories: options,
            searchTerm: this._filters.searchTerm
          };
          const lastFilter = options[options.length - 1];
          if (lastFilter) {
            this._logFilterTelemetry(lastFilter);
          }
        }
      }
      if ("searchTerm" in filterToApply) {
        this._filters.searchTerm = filterToApply.searchTerm;
        if (logSearchTelemetry && filterToApply.searchTerm) {
          this._telemetry?.logEvent({
            category: TELEMETRY_CATEGORY.ALL_SOLUTIONS,
            action: "Search",
            dimensions: [filterToApply.searchTerm]
          });
          return;
        }
      }
      this._allSolutionsPanelRef.value?.searchSolutions(filterToApply);
    } else {
      this._filters.categories = [];
      this._allSolutionsPanelRef.value?.searchSolutions();
    }
  }
}
customElement("solutions-all-shell", SolutionsAllShell);
export {
  SolutionsAllShell
};
