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 _KlevuQuicksearch_instances, _KlevuQuicksearch_searchField, _KlevuQuicksearch_resultObject, _KlevuQuicksearch_searchPageChange, _KlevuQuicksearch_internalRenderProductSlot, _KlevuQuicksearch_onPopupOpen, _KlevuQuicksearch_startSearch, _KlevuQuicksearch_renderResultPage, _KlevuQuicksearch_renderTrendingPage;
import { KlevuFetch, KlevuLastClickedProducts, trendingProducts, } from "@klevu/core";
import { Fragment, h, Host } from "@stencil/core";
import { parts } from "../../utils/parts";
import { KlevuInit } from "../klevu-init/klevu-init";
/**
 * Full app to create search bar that popups trending products and search results.
 *
 * @slot content - Popup content
 */
export class KlevuQuicksearch {
  constructor() {
    _KlevuQuicksearch_instances.add(this);
    _KlevuQuicksearch_searchField.set(this, void 0);
    _KlevuQuicksearch_resultObject.set(this, void 0);
    this.fallbackTerm = undefined;
    this.popupAnchor = "bottom-end";
    this.searchCategories = undefined;
    this.searchCmsPages = undefined;
    this.placeholder = undefined;
    this.searchText = undefined;
    this.searchFieldVariant = "pill";
    this.resultVariant = "simple";
    this.simpleResultCount = 3;
    this.fullResultCount = 9;
    this.enableChat = undefined;
    this.renderProductSlot = undefined;
    this.products = [];
    this.trendingProducts = [
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
      undefined,
    ];
    this.suggestions = [];
    this.cmsPages = undefined;
    this.categories = undefined;
    this.queryResult = undefined;
    this.searchSort = undefined;
    this.lastClickedProducts = undefined;
    this.activeTab = "trending";
    this.chat = false;
  }
  async onTextChange(event) {
    if (event.detail.length === 0) {
      this.suggestions = [];
      this.products = [];
    }
  }
  async onResults(event) {
    var _a, _b, _c, _d, _e, _f, _g;
    if (((_a = event.detail.search) === null || _a === void 0 ? void 0 : _a.records.length) === 0) {
      __classPrivateFieldSet(this, _KlevuQuicksearch_resultObject, event.detail.fallback, "f");
      this.products = (_b = event.detail.fallback) === null || _b === void 0 ? void 0 : _b.records;
    }
    else {
      __classPrivateFieldSet(this, _KlevuQuicksearch_resultObject, event.detail.search, "f");
      this.products = (_c = event.detail.search) === null || _c === void 0 ? void 0 : _c.records;
    }
    this.cmsPages = (_d = event.detail.cms) === null || _d === void 0 ? void 0 : _d.records;
    this.categories = (_e = event.detail.category) === null || _e === void 0 ? void 0 : _e.records;
    (_f = this.popup) === null || _f === void 0 ? void 0 : _f.openModal();
    this.queryResult = await ((_g = __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) === null || _g === void 0 ? void 0 : _g.getQueryResult("search"));
  }
  async onSuggestions(event) {
    this.suggestions = event.detail;
  }
  onProductClick(event) {
    var _a, _b, _c;
    const { product } = event.detail;
    (_a = this.popup) === null || _a === void 0 ? void 0 : _a.closeModal();
    if (product.id) {
      (_c = (_b = __classPrivateFieldGet(this, _KlevuQuicksearch_resultObject, "f")) === null || _b === void 0 ? void 0 : _b.searchClickEvent) === null || _c === void 0 ? void 0 : _c.call(_b, {
        productId: product.id,
        variantId: product.itemGroupId || product.id,
      });
    }
  }
  onChatLayoutClose() {
    this.chat = false;
  }
  async connectedCallback() {
    await KlevuInit.ready();
    const trendingProductsQuery = await KlevuFetch(trendingProducts({
      limit: this.simpleResultCount,
    }));
    const resultObject = trendingProductsQuery.queriesById("trendingProducts");
    if (resultObject) {
      this.trendingProducts = resultObject.records;
    }
  }
  render() {
    var _a, _b;
    return (h(Host, null, h("klevu-popup", { anchor: this.popupAnchor, ref: (el) => (this.popup = el), fullwidthContent: true, openAtFocus: true, onKlevuPopupOpen: __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_onPopupOpen).bind(this), elevation: 2 }, h("klevu-search-field", { ref: (el) => (__classPrivateFieldSet(this, _KlevuQuicksearch_searchField, el, "f")), limit: this.resultVariant === "simple" ? this.simpleResultCount : this.fullResultCount, sort: this.searchSort, slot: "origin", searchProducts: true, searchSuggestions: true, searchText: this.searchText, placeholder: this.placeholder, "fallback-term": this.fallbackTerm, searchCmsPages: this.searchCmsPages, searchCategories: this.searchCategories, onFocus: () => { var _a; return (_a = this.popup) === null || _a === void 0 ? void 0 : _a.openModal(); }, variant: this.searchFieldVariant }), h("div", { class: "content", slot: "content" }, ((_a = this.products) !== null && _a !== void 0 ? _a : []).length > 0
      ? __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_renderResultPage).call(this)
      : ((_b = this.products) === null || _b === void 0 ? void 0 : _b.length) === 0 && this.trendingProducts.length > 0
        ? __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_renderTrendingPage).call(this)
        : null)), this.chat && h("klevu-moi", null)));
  }
  static get is() { return "klevu-quicksearch"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-quicksearch.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-quicksearch.css"]
    };
  }
  static get properties() {
    return {
      "fallbackTerm": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "What term should be used if there isn't enough results"
        },
        "attribute": "fallback-term",
        "reflect": false
      },
      "popupAnchor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "Placement",
          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | undefined",
          "references": {
            "Placement": {
              "location": "import",
              "path": "@floating-ui/dom",
              "id": ""
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Anchor popup to witch side"
        },
        "attribute": "popup-anchor",
        "reflect": false,
        "defaultValue": "\"bottom-end\""
      },
      "searchCategories": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Should component search for categories too"
        },
        "attribute": "search-categories",
        "reflect": false
      },
      "searchCmsPages": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Should component search for CMS pages too"
        },
        "attribute": "search-cms-pages",
        "reflect": false
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Placeholder for input text"
        },
        "attribute": "placeholder",
        "reflect": false
      },
      "searchText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Text of search button"
        },
        "attribute": "search-text",
        "reflect": false
      },
      "searchFieldVariant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "SearchFieldVariant",
          "resolved": "\"default\" | \"pill\"",
          "references": {
            "SearchFieldVariant": {
              "location": "import",
              "path": "../klevu-search-field/klevu-search-field",
              "id": "src/components/klevu-search-field/klevu-search-field.tsx::SearchFieldVariant"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Change variant of the search field"
        },
        "attribute": "search-field-variant",
        "reflect": false,
        "defaultValue": "\"pill\""
      },
      "resultVariant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "KlevuQuicksearchResultVarint",
          "resolved": "\"full\" | \"simple\"",
          "references": {
            "KlevuQuicksearchResultVarint": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-quicksearch/klevu-quicksearch.tsx",
              "id": "src/components/klevu-quicksearch/klevu-quicksearch.tsx::KlevuQuicksearchResultVarint"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Change variant of the search results"
        },
        "attribute": "result-variant",
        "reflect": false,
        "defaultValue": "\"simple\""
      },
      "simpleResultCount": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "How many products to show in simple variant"
        },
        "attribute": "simple-result-count",
        "reflect": false,
        "defaultValue": "3"
      },
      "fullResultCount": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "How many products to show in full variant"
        },
        "attribute": "full-result-count",
        "reflect": false,
        "defaultValue": "9"
      },
      "enableChat": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Enable Klevu MOI chat"
        },
        "attribute": "enable-chat",
        "reflect": false
      },
      "renderProductSlot": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "(product: KlevuRecord, productSlot: KlevuProductSlots) => HTMLElement | string | null",
          "resolved": "((product: KlevuRecord, productSlot: KlevuProductSlots) => string | HTMLElement | null) | undefined",
          "references": {
            "KlevuRecord": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::KlevuRecord"
            },
            "KlevuProductSlots": {
              "location": "import",
              "path": "../klevu-product/klevu-product",
              "id": "src/components/klevu-product/klevu-product.tsx::KlevuProductSlots"
            },
            "HTMLElement": {
              "location": "global",
              "id": "global::HTMLElement"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Function to render custom products. Result has to be native HTML element or a string. Provides a product being rendered.\nThis function is called for each slot (top, image, info and bottom) of the component. Second parameter provides\nslot requested. Return null for slots that you do not want to render."
        }
      }
    };
  }
  static get states() {
    return {
      "products": {},
      "trendingProducts": {},
      "suggestions": {},
      "cmsPages": {},
      "categories": {},
      "queryResult": {},
      "searchSort": {},
      "lastClickedProducts": {},
      "activeTab": {},
      "chat": {}
    };
  }
  static get listeners() {
    return [{
        "name": "klevuTextChanged",
        "method": "onTextChange",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "klevuSearchResults",
        "method": "onResults",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "klevuSearchSuggestions",
        "method": "onSuggestions",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "klevuProductClick",
        "method": "onProductClick",
        "target": undefined,
        "capture": false,
        "passive": false
      }, {
        "name": "klevuChatLayoutClose",
        "method": "onChatLayoutClose",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
_KlevuQuicksearch_searchField = new WeakMap(), _KlevuQuicksearch_resultObject = new WeakMap(), _KlevuQuicksearch_instances = new WeakSet(), _KlevuQuicksearch_searchPageChange = async function _KlevuQuicksearch_searchPageChange(event) {
  var _a;
  if (!__classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) {
    return;
  }
  __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f").getPage("search", event.detail - 1);
  this.queryResult = await ((_a = __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) === null || _a === void 0 ? void 0 : _a.getQueryResult("search"));
}, _KlevuQuicksearch_internalRenderProductSlot = function _KlevuQuicksearch_internalRenderProductSlot(product, slot) {
  if (!this.renderProductSlot || !product) {
    return null;
  }
  const content = this.renderProductSlot(product, slot);
  if (content === null) {
    return null;
  }
  if (typeof content === "string") {
    return h("div", { slot: slot, innerHTML: content });
  }
  return (h("div", { slot: slot, ref: (el) => {
      if (!el) {
        return;
      }
      el.innerHTML = "";
      el.appendChild(content);
    } }));
}, _KlevuQuicksearch_onPopupOpen = function _KlevuQuicksearch_onPopupOpen() {
  this.lastClickedProducts = KlevuLastClickedProducts.getProducts(3);
}, _KlevuQuicksearch_startSearch = function _KlevuQuicksearch_startSearch(term) {
  var _a;
  this.products = [undefined, undefined, undefined];
  (_a = __classPrivateFieldGet(this, _KlevuQuicksearch_searchField, "f")) === null || _a === void 0 ? void 0 : _a.makeSearch(term);
}, _KlevuQuicksearch_renderResultPage = function _KlevuQuicksearch_renderResultPage() {
  var _a, _b, _c;
  return (h(Fragment, null, h("aside", null, h("klevu-suggestions-list", { suggestions: this.suggestions, onKlevuSuggestionClicked: (event) => __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_startSearch).call(this, event.detail) }), this.cmsPages && this.cmsPages.length > 0 && h("klevu-cms-list", { pages: this.cmsPages, link: true }), this.categories && this.categories.length > 0 && (h("klevu-cms-list", { pages: this.categories, caption: "Categories", link: true }))), h("section", null, this.resultVariant === "full" && (h(Fragment, null, h("div", { class: "resultheader" }, h("klevu-typography", { variant: "h3" }, "Search results"), h("klevu-sort", { variant: "inline", onKlevuSortChanged: (event) => (this.searchSort = event.detail) })), h("klevu-product-grid", { class: "desktop", itemsPerRow: 3 }, (_a = this.products) === null || _a === void 0 ? void 0 : _a.map((p) => (h("klevu-product", { product: p, fixedWidth: true, variant: "small", exportparts: parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom"))))), h("klevu-product-grid", { class: "mobile" }, (_b = this.products) === null || _b === void 0 ? void 0 : _b.map((p) => (h("klevu-product", { product: p, fixedWidth: true, variant: "line", exportparts: parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom"))))), h("klevu-pagination", { queryResult: this.queryResult, onKlevuPaginationChange: __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_searchPageChange).bind(this) }))), this.resultVariant === "simple" && (h(Fragment, null, h("div", { class: "resultheader" }, h("klevu-typography", { variant: "h3" }, "Search results")), h("div", { class: "lineproducts" }, (_c = this.products) === null || _c === void 0 ? void 0 : _c.map((p) => (h("klevu-product", { product: p, variant: "line", exportparts: parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom"))))))))));
}, _KlevuQuicksearch_renderTrendingPage = function _KlevuQuicksearch_renderTrendingPage() {
  var _a, _b, _c, _d, _e;
  return (h(Fragment, null, h("aside", null, this.enableChat && (h("klevu-button", { size: "small", onClick: () => (this.chat = true) }, "Start chat")), h("klevu-popular-searches", { onKlevuPopularSearchClicked: (event) => __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_startSearch).call(this, event.detail) }), h("klevu-latest-searches", { onKlevuLastSearchClicked: (event) => __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_startSearch).call(this, event.detail) })), h("section", null, h("div", { class: "tabrow" }, h("klevu-tab", { caption: "Trending", active: this.activeTab === "trending", onClick: () => (this.activeTab = "trending") }), h("klevu-tab", { caption: `Recently viewed (${(_b = (_a = this.lastClickedProducts) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0})`, active: this.activeTab === "last", onClick: () => {
      var _a;
      if (((_a = this.lastClickedProducts) === null || _a === void 0 ? void 0 : _a.length) === 0) {
        return;
      }
      this.activeTab = "last";
    }, disabled: ((_c = this.lastClickedProducts) === null || _c === void 0 ? void 0 : _c.length) === 0 })), this.activeTab === "trending" && (h(Fragment, null, (_d = this.trendingProducts) === null || _d === void 0 ? void 0 : _d.map((p) => (h("klevu-product", { product: p, variant: "line", exportparts: parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom")))))), this.activeTab === "last" && (h(Fragment, null, (_e = this.lastClickedProducts) === null || _e === void 0 ? void 0 : _e.map((p) => (h("klevu-product", { product: p, variant: "line", exportparts: parts["klevu-product"] }, __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "top"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "image"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "info"), __classPrivateFieldGet(this, _KlevuQuicksearch_instances, "m", _KlevuQuicksearch_internalRenderProductSlot).call(this, p, "bottom")))))))));
};
//# sourceMappingURL=klevu-quicksearch.js.map
