/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as s } from "../../chunks/runtime.js";
import { css as o, html as i } from "lit";
import { u as r } from "../../chunks/useT9n.js";
import { LitElement as n, createEvent as a, safeClassMap as c, nothing as h } from "@arcgis/lumina";
const u = o`.header-button-padding{padding-top:.5rem;padding-bottom:.5rem;padding-inline-end:1rem}.width-full{width:100%}.filter-layout-flex-row{display:flex;flex-direction:row;flex:1;background-color:var(--calcite-color-foreground-2)}.filter-layout-flex-column{display:flex;flex-direction:column;flex:1}.top-bottom-padding{padding-top:.5rem;padding-bottom:.5rem}calcite-panel{--calcite-panel-background-color: var(--calcite-color-foreground-1)}.border-color{--calcite-block-border-color: #00000000}`;
class d extends n {
  constructor() {
    super(), this.isAllSolutions = !1, this.isMobile = !1, this.isOrgAdmin = !1, this._activeFilterSettings = {
      categories: [],
      isOwnerMySolutions: !0,
      searchTerm: ""
    }, this._translations = r({ name: "solutions-deployed-filter-panel", blocking: !0 }), this.applyFilter = a(), this._handleFilterRemoved = (e) => {
      const t = e.detail;
      Array.isArray(t) ? this._activeFilterSettings = {
        ...this._activeFilterSettings,
        categories: [...t]
      } : typeof t == "string" && t.toLowerCase() === "My organization's solutions".toLowerCase() && this.changeOwnerFilter(!0, !0);
    }, this._resetToMySolutions = () => {
      this.changeOwnerFilter(!0, !0);
    }, this.listenOn(window, "filterRemoved", this._handleFilterRemoved), this.listenOn(window, "deployProgressEnd", this._resetToMySolutions);
  }
  static {
    this.properties = { isAllSolutions: 5, isMobile: 5, isOrgAdmin: 5, _activeFilterSettings: 16, _translations: 16 };
  }
  static {
    this.styles = u;
  }
  changeOwnerFilter(e, t) {
    this.isAllSolutions = !e, this._activeFilterSettings = {
      ...this._activeFilterSettings,
      isOwnerMySolutions: e
    };
    const l = {
      displayValue: this._activeFilterSettings.isOwnerMySolutions ? this._translations.mySolutions : this._translations.myOrgSolutions,
      type: "owner",
      value: this._activeFilterSettings.isOwnerMySolutions ? "My solutions" : "My organization's solutions"
    };
    t && this.applyFilter.emit(l);
  }
  changeSearchFilter(e, t) {
    this._activeFilterSettings = {
      ...this._activeFilterSettings,
      searchTerm: e
    }, t && this.applyFilter.emit({ searchTerm: e });
  }
  clearFilters() {
    this.changeSearchFilter(""), this.applyFilter.emit(null), setTimeout(() => {
      this.changeOwnerFilter(!0, !0);
    }, 500);
  }
  render() {
    return i`<div class=${c(this.isMobile ? "filter-layout-flex-column" : "filter-layout-flex-row")}>${this.isOrgAdmin && this.renderOwnerBlock() || ""}<calcite-input-text class="width-full top-bottom-padding" clearable icon=search @keyup=${(e) => {
      const t = e.target;
      e.key === "Enter" ? this.changeSearchFilter(t.value, !0) : this.changeSearchFilter(t.value, t.value.length >= 3 || t.value.length === 0);
    }} @blur=${(e) => {
      const t = e.target;
      this.changeSearchFilter(t.value, !0);
    }} .placeholder=${this._translations.search.solutions} slot=content-top .value=${this._activeFilterSettings.searchTerm}></calcite-input-text></div>`;
  }
  renderOwnerBlock() {
    return i`<calcite-dropdown width=m overlay-positioning=fixed><calcite-button appearance=outline-fill class="header-button-padding" .iconStart=${this.isAllSolutions ? "organization" : "user"} kind=neutral slot=trigger>${this.isAllSolutions ? this._translations.myOrgSolutions : this._translations.mySolutions}</calcite-button><calcite-dropdown-group group-title=${this._translations.owner ?? h}><calcite-dropdown-item icon-start=user @click=${() => {
      this.changeOwnerFilter(!0, !0);
    }} .selected=${!this.isAllSolutions}>${this._translations.mySolutions}</calcite-dropdown-item><calcite-dropdown-item icon-start=organization @click=${() => {
      this.changeOwnerFilter(!1, !0);
    }} .selected=${this.isAllSolutions}>${this._translations.myOrgSolutions}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
  }
}
s("solutions-deployed-filter-panel", d);
export {
  d as SolutionsDeployedFilterPanel
};
