import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as KlevuConfig, i as get, K as KlevuInit } from './klevu-init2.js';
import { d as defineCustomElement$3 } from './klevu-icon2.js';
import { d as defineCustomElement$2 } from './klevu-list2.js';
import { d as defineCustomElement$1 } from './klevu-typography2.js';
import { i as isBrowser } from './isBrowser.js';

var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
const url = "https://js.klevu.com/klevu-js-v1/klevu-js-api/";
const STORAGE_KEY = "klevu-kmc-data";
const STORAGE_TS_KEY = "klevu-kmc-data-ts";
const ONE_DAY = 86400000;
/**
 * Fetches KMC settings from server. Caches data for a day.
 *
 * @category KlevuFetch
 * @param ignoreCache If true, will ignore cache and fetch data from server
 * @returns
 */
function KlevuKMCSettings(ignoreCache) {
    return __awaiter(this, void 0, void 0, function* () {
        if (isBrowser() && window.localStorage && ignoreCache !== true) {
            const ts = window.localStorage.getItem(STORAGE_TS_KEY);
            const res = window.localStorage.getItem(STORAGE_KEY);
            if (res && ts && new Date().getTime() - parseInt(ts, 10) < ONE_DAY) {
                return JSON.parse(res);
            }
        }
        const start = `${url}${KlevuConfig.getDefault().apiKey}`;
        const res = yield Promise.all([
            get(`${start}.json`),
            get(`${start}-banner.json`),
            get(`${start}-maps.json`),
        ]);
        const data = {
            root: res[0],
            banner: res[1],
            maps: res[2],
        };
        if (isBrowser() && window.localStorage) {
            window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
            window.localStorage.setItem(STORAGE_TS_KEY, new Date().getTime().toString());
        }
        return data;
    });
}

const klevuPopularSearchesCss = ":host{display:block}klevu-typography.caption{margin-bottom:var(--klevu-spacing-02)}klevu-list:hover{cursor:pointer;background:var(--klevu-color-neutral-2)}";

var __classPrivateFieldGet = (undefined && undefined.__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 _KlevuPopularSearches_instances, _KlevuPopularSearches_popularSearchClick;
const KlevuPopularSearches = /*@__PURE__*/ proxyCustomElement(class KlevuPopularSearches extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuPopularSearchClicked = createEvent(this, "klevuPopularSearchClicked", 7);
    _KlevuPopularSearches_instances.add(this);
    this.caption = "Popular searches";
    this.popularSearches = [];
  }
  async connectedCallback() {
    var _a, _b;
    await KlevuInit.ready();
    try {
      const settings = await KlevuKMCSettings();
      this.popularSearches = (_b = (_a = settings.root) === null || _a === void 0 ? void 0 : _a.klevu_webstorePopularTerms) !== null && _b !== void 0 ? _b : [];
    }
    catch (_c) { }
  }
  render() {
    if (this.popularSearches.length == 0) {
      return null;
    }
    return (h(Host, null, h("klevu-typography", { class: "caption", variant: "h3" }, this.caption), this.popularSearches.map((s) => (h("klevu-list", { condensed: true, noXPadding: true, onClick: () => __classPrivateFieldGet(this, _KlevuPopularSearches_instances, "m", _KlevuPopularSearches_popularSearchClick).call(this, s) }, h("span", { slot: "primary" }, s))))));
  }
  static get style() { return klevuPopularSearchesCss; }
}, [1, "klevu-popular-searches", {
    "caption": [1],
    "popularSearches": [32]
  }]);
_KlevuPopularSearches_instances = new WeakSet(), _KlevuPopularSearches_popularSearchClick = function _KlevuPopularSearches_popularSearchClick(suggestion) {
  this.klevuPopularSearchClicked.emit(suggestion);
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-popular-searches", "klevu-icon", "klevu-list", "klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-popular-searches":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuPopularSearches);
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuPopularSearches as K, defineCustomElement as d };

//# sourceMappingURL=klevu-popular-searches2.js.map