var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
  if (kind === "m")
    throw new TypeError("Private method is not writable");
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a setter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _KlevuFacetList_instances, _KlevuFacetList_applyManager, _KlevuFacetList_applySettings, _KlevuFacetList_clear;
import { FilterManager } from "@klevu/core";
import { h, Host, } from "@stencil/core";
import { partsExports } from "../../utils/partsExports";
/**
 * Render all facets of filter manager
 *
 */
export class KlevuFacetList {
  constructor() {
    _KlevuFacetList_instances.add(this);
    _KlevuFacetList_applyManager.set(this, new FilterManager());
    this.manager = undefined;
    this.mode = undefined;
    this.customOrder = undefined;
    this.colorSwatches = [];
    this.colorSwatchOverrides = undefined;
    this.accordion = undefined;
    this.useApplyButton = undefined;
    this.applyButtonText = "Apply";
    this.clearButtonText = "Clear";
    this.defaultPriceLabel = "Price";
    this.shouldUpdateUrlForFacets = undefined;
    this.priceSliderCurrency = "EUR";
    this.filters = [];
  }
  connectedCallback() {
    if (!this.manager) {
      return;
    }
    __classPrivateFieldSet(this, _KlevuFacetList_applyManager, new FilterManager(), "f");
    __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").setState(this.manager.getCurrentState());
    if (this.useApplyButton) {
      this.updateApplyFilterState();
    }
    else {
      this.filters = this.manager.filters;
    }
  }
  componentWillLoad() {
    if (!this.shouldUpdateUrlForFacets) {
      return;
    }
    this.manager.readFromURLParams(new URL(document.URL).searchParams);
    this.klevuApplyFilters.emit({
      manager: this.manager,
    });
  }
  filterManagerAppliedFilters() {
    __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").setState(this.manager.getCurrentState());
    if (!this.useApplyButton) {
      this.filters = this.manager.filters;
    }
    if (this.shouldUpdateUrlForFacets) {
      const searchParams = this.manager.toURLParams(new URL(document.URL).searchParams);
      window.history.replaceState({}, "", `${window.location.pathname}?${searchParams}`);
    }
  }
  filterSelectionUpdate(e) {
    if (!this.useApplyButton) {
      this.filters = this.manager.filters;
    }
  }
  /**
   * When using `useApplyButton` then this method can be used to update current state filterManager
   * into to local state of that is displayed in the UI
   */
  async updateApplyFilterState() {
    if (!this.useApplyButton) {
      return;
    }
    this.filters = __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").filters;
  }
  render() {
    return (h(Host, null, this.filters.map((f, index) => {
      var _a;
      if (FilterManager.isKlevuFilterResultOptions(f) || FilterManager.isKlevuFilterResultRating(f)) {
        let mode;
        if (this.mode && typeof this.mode === "string") {
          mode = this.mode;
        }
        else if (this.mode && typeof this.mode === "object") {
          mode = this.mode[f.key];
        }
        return (h("klevu-facet", { priceSliderCurrency: this.priceSliderCurrency, exportparts: partsExports("klevu-facet"), accordion: this.accordion, accordionStartOpen: index === 0, customOrder: (_a = this.customOrder) === null || _a === void 0 ? void 0 : _a[f.key], manager: this.useApplyButton ? __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f") : this.manager, option: f, useColorSwatch: this.colorSwatches && !!this.colorSwatches.includes(f.key), colorSwatchOverrides: this.colorSwatchOverrides && this.colorSwatchOverrides[f.key], mode: mode }));
      }
      else if (FilterManager.isKlevuFilterResultSlider(f)) {
        return (h("klevu-facet", { priceSliderCurrency: this.priceSliderCurrency, exportparts: partsExports("klevu-facet"), accordion: this.accordion, manager: this.useApplyButton ? __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f") : this.manager, slider: f, labelOverride: f.label === "klevu_price" ? this.defaultPriceLabel : undefined }));
      }
    }), this.useApplyButton ? (h("div", { class: "applybar" }, h("klevu-button", { exportparts: partsExports("klevu-button"), isSecondary: true, onClick: () => __classPrivateFieldGet(this, _KlevuFacetList_instances, "m", _KlevuFacetList_clear).call(this) }, this.clearButtonText), h("klevu-button", { exportparts: partsExports("klevu-button"), fullWidth: true, class: "apply", onClick: () => __classPrivateFieldGet(this, _KlevuFacetList_instances, "m", _KlevuFacetList_applySettings).call(this) }, this.applyButtonText))) : null));
  }
  static get is() { return "klevu-facet-list"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-facet-list.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-facet-list.css"]
    };
  }
  static get properties() {
    return {
      "manager": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "FilterManager",
          "resolved": "FilterManager",
          "references": {
            "FilterManager": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::FilterManager"
            }
          }
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Filter managet from which the list is built from"
        }
      },
      "mode": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "KlevuFacetMode | { [key: string]: KlevuFacetMode }",
          "resolved": "\"checkbox\" | \"radio\" | undefined | { [key: string]: KlevuFacetMode; }",
          "references": {
            "KlevuFacetMode": {
              "location": "import",
              "path": "../klevu-facet/klevu-facet",
              "id": "src/components/klevu-facet/klevu-facet.tsx::KlevuFacetMode"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Set mode for facets or if object is passed then define per key"
        },
        "attribute": "mode",
        "reflect": false
      },
      "customOrder": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "{ [key: string]: string[] }",
          "resolved": "undefined | { [key: string]: string[]; }",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Custom order keys for every facet"
        }
      },
      "colorSwatches": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "string[]",
          "resolved": "string[] | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Specify which facet keys should be rendered as color swatches"
        },
        "defaultValue": "[]"
      },
      "colorSwatchOverrides": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "{\n    [key: string]: KlevuColorSwatchOverride\n  }",
          "resolved": "undefined | { [key: string]: KlevuColorSwatchOverride; }",
          "references": {
            "KlevuColorSwatchOverride": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-facet-list/klevu-facet-list.tsx",
              "id": "src/components/klevu-facet-list/klevu-facet-list.tsx::KlevuColorSwatchOverride"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Specific overrides for individual color swatch.\nThe overrides can be colors (hex or valid css colors) or a valid url to load.\nImageUrl takes precedence over color when both are specified."
        }
      },
      "accordion": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Should use accordions to for facets"
        },
        "attribute": "accordion",
        "reflect": false
      },
      "useApplyButton": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Display \"apply filters\" button in the end. And do not apply filters until this button is pressed"
        },
        "attribute": "use-apply-button",
        "reflect": false
      },
      "applyButtonText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Button text for Apply button when using `useApplyButton`"
        },
        "attribute": "apply-button-text",
        "reflect": false,
        "defaultValue": "\"Apply\""
      },
      "clearButtonText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Button text for Clear button when using `useApplyButton`"
        },
        "attribute": "clear-button-text",
        "reflect": false,
        "defaultValue": "\"Clear\""
      },
      "defaultPriceLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Default price label for sliders"
        },
        "attribute": "default-price-label",
        "reflect": false,
        "defaultValue": "\"Price\""
      },
      "shouldUpdateUrlForFacets": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "To set the facet selection value in the url"
        },
        "attribute": "should-update-url-for-facets",
        "reflect": false
      },
      "priceSliderCurrency": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The currency to show in the price slider"
        },
        "attribute": "price-slider-currency",
        "reflect": false,
        "defaultValue": "\"EUR\""
      }
    };
  }
  static get states() {
    return {
      "filters": {}
    };
  }
  static get events() {
    return [{
        "method": "klevuApplyFilters",
        "name": "klevuApplyFilters",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When filters are applied"
        },
        "complexType": {
          "original": "KlevuFiltersAppliedEventDetail",
          "resolved": "{ manager: FilterManager; }",
          "references": {
            "KlevuFiltersAppliedEventDetail": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-facet-list/klevu-facet-list.tsx",
              "id": "src/components/klevu-facet-list/klevu-facet-list.tsx::KlevuFiltersAppliedEventDetail"
            }
          }
        }
      }];
  }
  static get methods() {
    return {
      "updateApplyFilterState": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "When using `useApplyButton` then this method can be used to update current state filterManager\ninto to local state of that is displayed in the UI",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "klevu-filters-applied",
        "method": "filterManagerAppliedFilters",
        "target": "document",
        "capture": false,
        "passive": false
      }, {
        "name": "klevu-filter-selection-updates",
        "method": "filterSelectionUpdate",
        "target": "document",
        "capture": false,
        "passive": false
      }];
  }
}
_KlevuFacetList_applyManager = new WeakMap(), _KlevuFacetList_instances = new WeakSet(), _KlevuFacetList_applySettings = function _KlevuFacetList_applySettings() {
  this.manager.setState(__classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").getCurrentState());
  this.klevuApplyFilters.emit({
    manager: this.manager,
  });
}, _KlevuFacetList_clear = function _KlevuFacetList_clear() {
  __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").clearOptionSelections();
  this.filters = __classPrivateFieldGet(this, _KlevuFacetList_applyManager, "f").filters;
};
//# sourceMappingURL=klevu-facet-list.js.map
