'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-85d13173.js');
const klevuInit = require('./klevu-init-a87b5171.js');
const partsExports = require('./partsExports-8da45cd3.js');
const moi = require('./moi-8ee228f7.js');
require('./KlevuDomEvents-e77df10c.js');

const klevuMoiCss = ":host{display:block;--klevu-slides-item-width:var(--klevu-moi-slides-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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.klevuMoiProductClick = index.createEvent(this, "klevuMoiProductClick", 7);
    this.klevuMoiVisibilityChange = index.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.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 moi.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 (index.h(index.Host, null, index.h("div", { class: popupClasses }, this.session && (index.h("klevu-chat-layout", { slot: "content", exportparts: partsExports.partsExports("klevu-chat-layout"), onKlevuChatLayoutMessageSent: (e) => __classPrivateFieldGet(this, _KlevuMoi_instances, "m", _KlevuMoi_sendMessage).call(this, e.detail), ref: (el) => {
        __classPrivateFieldSet(this, _KlevuMoi_layoutRef, el, "f");
      } }, index.h("div", { slot: "header" }, index.h("klevu-typography", { variant: "body-m-bold" }, "MOI"), index.h("klevu-button", { exportparts: partsExports.partsExports("klevu-button"), onClick: () => this.close(), size: "small", icon: "close", isSecondary: true })), index.h("klevu-chat-messages", { exportparts: partsExports.partsExports("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 && (index.h("klevu-loading-indicator", { exportparts: partsExports.partsExports("klevu-loading-indicator") })), index.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) => (index.h("klevu-button", { exportparts: partsExports.partsExports("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)))), index.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) => (index.h("klevu-button", { exportparts: partsExports.partsExports("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))))))), index.h("klevu-modal", { exportparts: partsExports.partsExports("klevu-modal"), ref: (el) => (__classPrivateFieldSet(this, _KlevuMoi_modalRef, el, "f")) }, index.h("klevu-product", { exportparts: partsExports.partsExports("klevu-product"), product: this.currentProduct }))));
  }
  get el() { return index.getElement(this); }
};
_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);
};
KlevuMoi.style = klevuMoiCss;

exports.klevu_moi = KlevuMoi;

//# sourceMappingURL=klevu-moi.cjs.entry.js.map