import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
import { p as partsExports } from './partsExports.js';
import { m as markdown } from './utils.js';
import { d as defineCustomElement$8 } from './klevu-button2.js';
import { d as defineCustomElement$7 } from './klevu-chat-bubble2.js';
import { d as defineCustomElement$6 } from './klevu-icon2.js';
import { d as defineCustomElement$5 } from './klevu-product2.js';
import { d as defineCustomElement$4 } from './klevu-rating2.js';
import { d as defineCustomElement$3 } from './klevu-slides2.js';
import { d as defineCustomElement$2 } from './klevu-typography2.js';
import { d as defineCustomElement$1 } from './klevu-util-scrollbars2.js';

const klevuChatMessagesCss = ":host{display:flex;flex-direction:column;gap:var(--klevu-spacing-04);word-break:break-word}.message-container{display:flex;flex-direction:row;align-items:center}.feedback{display:flex}.feedback klevu-icon{font-size:22px;padding:6px;cursor:pointer;position:relative}.feedback klevu-icon:first-child{color:var(--klevu-color-positive)}.feedback klevu-icon:last-child{color:var(--klevu-color-negative)}.feedback-hide{opacity:0}.end-spacer{height:var(--klevu-spacing-04);width:100%;display:var(--end-spacer-display)}.filteractions{display:flex;flex-wrap:wrap;gap:var(--klevu-spacing-02)}.productactions{display:flex;flex-direction:column;gap:var(--klevu-spacing-02)}a{color:var(--klevu-chat-bubble-text-color-remote, var(--klevu-color-neutral-1))}klevu-product{--klevu-product-details-spacing:1px}klevu-button{--klevu-button-cursor-hover:pointer}";

const KlevuChatMessages = /*@__PURE__*/ proxyCustomElement(class KlevuChatMessages extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.klevuChatProductClick = createEvent(this, "klevuChatProductClick", 7);
    this.klevuSelectFilter = createEvent(this, "klevuSelectFilter", 7);
    this.klevuSelectProductOption = createEvent(this, "klevuSelectProductOption", 7);
    this.klevuMessageFeedback = createEvent(this, "klevuMessageFeedback", 7);
    this.feedbackReasons = ["Irrelevant", "Incorrect", "Offensive", "Other"];
    this.messages = [];
    this.feedbacks = undefined;
    this.enableMessageFeedback = undefined;
    this.showFeedbackFor = undefined;
    this.handleTypeWriterEffectEnds = undefined;
    this.speed = 10;
    this.scrollBottom = undefined;
    this.centerNextPrev = true;
    this.lastMessageDisplayedText = "";
    this.typeWriterEnds = true;
  }
  watchPropHandler(newValue, oldValue) {
    var _a, _b, _c;
    const lastItem = newValue[newValue.length - 1] || null;
    const lastItemOld = oldValue[oldValue.length - 1] || null;
    this.lastMessageDisplayedText = "";
    this.typeWriterEnds = true;
    if (this.speed > 0 && (lastItem === null || lastItem === void 0 ? void 0 : lastItem.message) && lastItemOld && ((_a = lastItemOld === null || lastItemOld === void 0 ? void 0 : lastItemOld.message) === null || _a === void 0 ? void 0 : _a.value) !== ((_b = lastItem.message) === null || _b === void 0 ? void 0 : _b.value)) {
      this.typeWriterEnds = false;
      (_c = this.handleTypeWriterEffectEnds) === null || _c === void 0 ? void 0 : _c.call(this, true);
      this.startTyping(markdown(lastItem.message.value));
    }
  }
  startTyping(text) {
    let index = 0;
    if (text.length > 500) {
      this.speed = 5;
    }
    const type = () => {
      var _a, _b;
      if (index < text.length && !this.typeWriterEnds) {
        (_a = this.scrollBottom) === null || _a === void 0 ? void 0 : _a.call(this);
        this.lastMessageDisplayedText += text.charAt(index);
        index++;
        setTimeout(type, this.speed);
      }
      else {
        this.typeWriterEnds = true;
        (_b = this.handleTypeWriterEffectEnds) === null || _b === void 0 ? void 0 : _b.call(this, false);
        this.lastMessageDisplayedText = text;
      }
    };
    type();
  }
  render() {
    return (h(Host, null, this.messages.map((message, index) => {
      var _a, _b;
      if ("message" in message) {
        const givenFeedback = (_a = this.feedbacks) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === message.message.id);
        const isLastMessage = this.messages.length - 1 === index;
        const showFeedback = this.showFeedbackFor === message.message.id && !Boolean(givenFeedback === null || givenFeedback === void 0 ? void 0 : givenFeedback.reason);
        let htmlMessage = "";
        if (index === this.messages.length - 1 && this.lastMessageDisplayedText) {
          htmlMessage = this.lastMessageDisplayedText;
        }
        else {
          htmlMessage = markdown(message.message.value);
        }
        return (h(Fragment, null, h("div", { class: "message-container" }, h("klevu-chat-bubble", { exportparts: partsExports("klevu-chat-bubble"), feedback: message.message.collectFeedback ? givenFeedback : undefined, feedbackReasons: showFeedback ? this.feedbackReasons : undefined, remote: true, innerHTML: htmlMessage }), this.enableMessageFeedback && message.message.collectFeedback && !givenFeedback && isLastMessage && (h("div", { class: `feedback ${!this.typeWriterEnds ? "feedback-hide" : ""}` }, h("klevu-icon", { name: "thumb_up", onClick: () => this.klevuMessageFeedback.emit({ feedback: "up", message: message.message }) }), h("klevu-icon", { name: "thumb_down", onClick: () => this.klevuMessageFeedback.emit({ feedback: "down", message: message.message }) })))), message.message.note && (h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.message.note))));
      }
      if ("filter" in message) {
        return (h(Fragment, null, message.filter.settings.label && (h("klevu-chat-bubble", { remote: true }, message.filter.settings.label)), h("div", { class: "filteractions" }, message.filter.options.map((o) => (h("klevu-button", { isSecondary: true, exportparts: partsExports("klevu-button"), disabled: this.messages.length - 1 !== index, onClick: () => {
            if (this.messages.length - 1 === index) {
              this.klevuSelectFilter.emit({
                message: message,
                filter: o,
              });
            }
          } }, o.name)))), message.filter.note && (h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.filter.note))));
      }
      if ("productData" in message) {
        return (h("div", null, h("klevu-slides", { centerNextPrev: this.centerNextPrev, exportparts: partsExports("klevu-slides"), style: {
            "--klevu-slides-item-width": "188px",
            "--klevu-product-grid-spacing": "var(--klevu-spacing-04)",
          } }, message.productData.products.map((product) => (h("klevu-product", { product: product, hideSwatches: true, hideDescription: true, hidePrice: true, showAddToCart: false, showRatings: false, onKlevuProductClick: (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.klevuChatProductClick.emit({
              product,
            });
            return false;
          }, style: {
            "text-align": "center",
          }, exportparts: partsExports("klevu-product") }, h("div", { slot: "bottom", class: "productactions" }, product.options.map((option) => (h("klevu-button", { exportparts: partsExports("klevu-button"), fullWidth: true, isSecondary: true, onClick: () => {
            this.klevuSelectProductOption.emit({
              product,
              option,
            });
          } }, option.name)))))))), message.productData.note && (h("klevu-typography", { style: {
            "--klevu-typography-color": "var(--klevu-color-neutral-6)",
          }, variant: "body-xs" }, message.productData.note))));
      }
      if ("local" in message) {
        return h("klevu-chat-bubble", null, (_b = message.local) === null || _b === void 0 ? void 0 : _b.message);
      }
    }), h("slot", { name: "chat-messages-after" }), h("div", { class: "end-spacer" }, "\u00A0")));
  }
  static get watchers() { return {
    "messages": ["watchPropHandler"]
  }; }
  static get style() { return klevuChatMessagesCss; }
}, [1, "klevu-chat-messages", {
    "messages": [16],
    "feedbacks": [16],
    "enableMessageFeedback": [4, "enable-message-feedback"],
    "showFeedbackFor": [1, "show-feedback-for"],
    "handleTypeWriterEffectEnds": [16],
    "speed": [2],
    "scrollBottom": [16],
    "centerNextPrev": [4, "center-next-prev"],
    "lastMessageDisplayedText": [32],
    "typeWriterEnds": [32]
  }, undefined, {
    "messages": ["watchPropHandler"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-chat-messages", "klevu-button", "klevu-chat-bubble", "klevu-icon", "klevu-product", "klevu-rating", "klevu-slides", "klevu-typography", "klevu-util-scrollbars"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-chat-messages":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuChatMessages);
      }
      break;
    case "klevu-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "klevu-chat-bubble":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "klevu-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "klevu-product":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "klevu-rating":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "klevu-slides":
      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 { KlevuChatMessages as K, defineCustomElement as d };

//# sourceMappingURL=klevu-chat-messages2.js.map