import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { K as KlevuInit } from './klevu-init2.js';
import { d as defineCustomElement$e } from './klevu-button2.js';
import { d as defineCustomElement$d } from './klevu-chat-bubble2.js';
import { d as defineCustomElement$c } from './klevu-chat-layout2.js';
import { d as defineCustomElement$b } from './klevu-chat-messages2.js';
import { d as defineCustomElement$a } from './klevu-icon2.js';
import { d as defineCustomElement$9 } from './klevu-loading-indicator2.js';
import { d as defineCustomElement$8 } from './klevu-modal2.js';
import { d as defineCustomElement$7 } from './klevu-popup2.js';
import { d as defineCustomElement$6 } from './klevu-product2.js';
import { d as defineCustomElement$5 } from './klevu-rating2.js';
import { d as defineCustomElement$4 } from './klevu-slides2.js';
import { d as defineCustomElement$3 } from './klevu-textfield2.js';
import { d as defineCustomElement$2 } from './klevu-typography2.js';
import { d as defineCustomElement$1 } from './klevu-util-scrollbars2.js';
import { s as startMoi } from './moi.js';

const klevuMoiCss = ":host{display:block;--klevu-slides-item-width:200px;--container-height:var(--klevu-moi-height, 550px);--container-width:var(--klevu-moi-width, 640px)}.popup{display:none;position:fixed;bottom:-100vh;right:20px;height:var(--container-height);width:var(--container-width);max-height:100vh;max-width:calc(100vw - 20px);background:var(--klevu-color-neutral-1);border-radius:var(--klevu-border-radius-m);box-shadow:var(--klevu-elevation-3);padding:var(--klevu-spacing-04);z-index:100;transition-property:bottom, opacity;transition-duration:0.3s;transition-timing-function:ease-in;opacity:0;box-sizing:border-box}.popup.show{display:block}.popup.open{bottom:20px;right:20px;height:var(--container-height);width:var(--container-width);opacity:1}@media (max-width: 640px){.popup{right:0;bottom:-100vh;max-width:100vw;height:100vh}.popup.open{right:0;bottom:0;max-width:100vw;height:100vh}}klevu-chat-messages{height:calc(var(--container-height) - 250px)}.menu{display:flex;flex-direction:column;gap:var(--klevu-spacing-03)}.genericactions{margin:var(--klevu-spacing-03) 0;display:flex;flex-direction:row;gap:var(--klevu-spacing-03);flex-wrap:wrap;justify-content:center}div[slot=\"header\"]{display:flex;justify-content:space-between;align-items:center;padding:0 var(--klevu-spacing-02) var(--klevu-spacing-02);flex-shrink:0;margin-bottom:var(--klevu-spacing-04);border-bottom:1px solid var(--klevu-color-neutral-4)}";

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 __classPrivateFieldSet = (undefined && undefined.__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 _KlevuMoi_instances, _KlevuMoi_layoutRef, _KlevuMoi_modalRef, _KlevuMoi_sendMessage, _KlevuMoi_sendFilter, _KlevuMoi_buildChatFormat, _KlevuMoi_productClick;
const KlevuMoi = /*@__PURE__*/ proxyCustomElement(class KlevuMoi extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuMoiProductClick = createEvent(this, "klevuMoiProductClick", 7);
    this.klevuMoiVisibilityChange = createEvent(this, "klevuMoiVisibilityChange", 7);
    _KlevuMoi_instances.add(this);
    _KlevuMoi_layoutRef.set(this, void 0);
    _KlevuMoi_modalRef.set(this, void 0);
    this.currentProduct = undefined;
    this.messages = [];
    this.loading = false;
    this.isShow = false;
    this.isOpen = false;
    this.apiKey = undefined;
    this.startOpen = undefined;
  }
  /** By default redirect the page if product click is not cancelled */
  onKlevuMoiProductClick(event) {
    setTimeout(() => {
      if (!event.defaultPrevented) {
        window.location.href = event.detail.url;
      }
    }, 1);
  }
  async connectedCallback() {
    await KlevuInit.ready();
    if (this.startOpen) {
      this.open();
    }
  }
  /**
   * Initialize the MOI session and open window
   */
  async open() {
    var _a;
    if (!this.session) {
      const config = await ((_a = this.el.closest("klevu-init")) === null || _a === void 0 ? void 0 : _a.getConfig());
      this.session = await startMoi({
        onMessage: this.onMessage.bind(this),
        // Do nothing on redirect as we have our own system
        onRedirect: (url) => { },
        settings: {
          configOverride: config,
        },
      });
    }
    this.messages = this.session.messages;
    this.isShow = true;
    this.klevuMoiVisibilityChange.emit("open");
    setTimeout(async () => {
      var _a;
      this.isOpen = true;
      await ((_a = __classPrivateFieldGet(this, _KlevuMoi_layoutRef, "f")) === null || _a === void 0 ? void 0 : _a.scrollMainToBottom("instant"));
    }, 50);
  }
  async close() {
    if (!this.isOpen) {
      return;
    }
    this.isOpen = false;
    this.klevuMoiVisibilityChange.emit("close");
    setTimeout(() => {
      this.isShow = false;
    }, 300);
  }
  onMessage() {
    var _a;
    if (!this.session) {
      return;
    }
    this.messages = this.session.messages;
    (_a = __classPrivateFieldGet(this, _KlevuMoi_layoutRef, "f")) === null || _a === void 0 ? void 0 : _a.scrollMainToBottom();
  }
  render() {
    var _a, _b, _c, _d;
    const popupClasses = {
      popup: true,
      show: this.isShow,
      open: this.isOpen,
    };
    if (!this.isShow) {
      return null;
    }
    return (h(Host, null, h("div", { class: popupClasses }, this.session && (h("klevu-chat-layout", { slot: "content", onKlevuChatLayoutMessageSent: (e) => __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_sendMessage).call(this, e.detail), ref: (el) => {
        __classPrivateFieldSet(this, _KlevuMoi_layoutRef, el, "f");
      } }, h("div", { slot: "header" }, h("klevu-typography", { variant: "body-m-bold" }, "MOI"), h("klevu-button", { onClick: () => this.close(), size: "small", icon: "close", isSecondary: true })), h("klevu-chat-messages", { onKlevuSelectFilter: (event) => {
        __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_sendFilter).call(this, event.detail.filter.value, __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_buildChatFormat).call(this, event.detail.filter, event.detail.message.filter.settings));
      }, onKlevuSelectProductOption: (event) => {
        var _a;
        const option = event.detail.option;
        const product = event.detail.product;
        if (option.intent === "show-similar-products") {
          __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_sendMessage).call(this, option.chat, {
            context: {
              url: product.url,
            },
            id: product.id,
            intent: option.intent,
          });
        }
        else if (option.intent === "quick-view") {
          this.currentProduct = product;
          (_a = __classPrivateFieldGet(this, _KlevuMoi_modalRef, "f")) === null || _a === void 0 ? void 0 : _a.openModal();
        }
      }, onKlevuChatProductClick: (event) => {
        event.preventDefault();
        event.stopPropagation();
        __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_productClick).call(this, event.detail.product);
        return false;
      }, messages: this.messages }), this.loading && h("klevu-loading-indicator", null), h("div", { slot: "actions", class: "genericactions" }, (_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.genericOptions) === null || _b === void 0 ? void 0 : _b.options.map((item) => (h("klevu-button", { size: "small", isSecondary: true, onClick: () => {
        var _a;
        if (item.type === "message") {
          __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_sendMessage).call(this, item.chat);
        }
        else if (item.type === "clearChat") {
          (_a = this.session) === null || _a === void 0 ? void 0 : _a.clear();
        }
      } }, item.name)))), h("div", { slot: "menu", class: "menu" }, (_d = (_c = this.session) === null || _c === void 0 ? void 0 : _c.menu) === null || _d === void 0 ? void 0 : _d.options.filter((i) => i.type === "message").map((item) => (h("klevu-button", { onClick: () => {
        var _a;
        if (item.type === "message") {
          __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_sendMessage).call(this, item.chat);
        }
        else {
          console.error("Not implemented yet");
        }
        (_a = __classPrivateFieldGet(this, _KlevuMoi_layoutRef, "f")) === null || _a === void 0 ? void 0 : _a.closePopup();
      } }, item.name))))))), h("klevu-modal", { ref: (el) => (__classPrivateFieldSet(this, _KlevuMoi_modalRef, el, "f")) }, h("klevu-product", { product: this.currentProduct }))));
  }
  get el() { return this; }
  static get style() { return klevuMoiCss; }
}, [1, "klevu-moi", {
    "apiKey": [1, "api-key"],
    "startOpen": [4, "start-open"],
    "currentProduct": [32],
    "messages": [32],
    "loading": [32],
    "isShow": [32],
    "isOpen": [32],
    "open": [64],
    "close": [64]
  }, [[0, "klevuMoiProductClick", "onKlevuMoiProductClick"]]]);
_KlevuMoi_layoutRef = new WeakMap(), _KlevuMoi_modalRef = new WeakMap(), _KlevuMoi_instances = new WeakSet(), _KlevuMoi_sendMessage = async function _KlevuMoi_sendMessage(msg, product) {
  var _a;
  if (!this.session) {
    return;
  }
  this.loading = true;
  await this.session.query({
    message: msg,
    product,
  });
  this.loading = false;
  (_a = __classPrivateFieldGet(this, _KlevuMoi_layoutRef, "f")) === null || _a === void 0 ? void 0 : _a.scrollMainToBottom();
}, _KlevuMoi_sendFilter = async function _KlevuMoi_sendFilter(filterValue, message) {
  var _a;
  if (!this.session) {
    return;
  }
  await this.session.query({
    message,
    filter: {
      value: filterValue,
    },
  });
  (_a = __classPrivateFieldGet(this, _KlevuMoi_layoutRef, "f")) === null || _a === void 0 ? void 0 : _a.scrollMainToBottom();
}, _KlevuMoi_buildChatFormat = function _KlevuMoi_buildChatFormat(target, settings) {
  if (settings.key && (target === null || target === void 0 ? void 0 : target.value) === `${settings.key}:klevu_any`) {
    return settings.chatFormatEmpty;
  }
  if (target && target.name && settings.chatFormat) {
    return settings.chatFormat.replace(`$VALUE$`, target.name);
  }
  return undefined;
}, _KlevuMoi_productClick = async function _KlevuMoi_productClick(product) {
  if (!this.session || !product.id || !product.url) {
    return;
  }
  this.loading = true;
  await this.session.query({
    product: {
      id: product.id,
      context: {
        url: product.url,
      },
      intent: "redirect",
    },
  });
  this.loading = false;
  this.klevuMoiProductClick.emit(product);
};
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-moi", "klevu-button", "klevu-chat-bubble", "klevu-chat-layout", "klevu-chat-messages", "klevu-icon", "klevu-loading-indicator", "klevu-modal", "klevu-popup", "klevu-product", "klevu-rating", "klevu-slides", "klevu-textfield", "klevu-typography", "klevu-util-scrollbars"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-moi":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuMoi);
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$e();
      }
      break;
    case "klevu-chat-bubble":
      if (!customElements.get(tagName)) {
        defineCustomElement$d();
      }
      break;
    case "klevu-chat-layout":
      if (!customElements.get(tagName)) {
        defineCustomElement$c();
      }
      break;
    case "klevu-chat-messages":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "klevu-loading-indicator":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "klevu-modal":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "klevu-popup":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "klevu-product":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "klevu-rating":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "klevu-slides":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-textfield":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "klevu-util-scrollbars":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { KlevuMoi as K, defineCustomElement as d };

//# sourceMappingURL=klevu-moi2.js.map