import { Fragment, Host, h } from "@stencil/core";
/**
 * @slot chat-messages-after - Things to place in the after all messages
 */
export class KlevuChatMessages {
  constructor() {
    this.feedbackReasons = ["Irrelevant", "Incorrect", "Offensive", "Other"];
    this.messages = [];
    this.feedbacks = undefined;
    this.enableMessageFeedback = undefined;
    this.showFeedbackFor = undefined;
  }
  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);
        return (h(Fragment, null, h("div", { class: "message-container" }, h("klevu-chat-bubble", { feedback: message.message.collectFeedback ? givenFeedback : undefined, feedbackReasons: showFeedback ? this.feedbackReasons : undefined, remote: true }, message.message.value), this.enableMessageFeedback && message.message.collectFeedback && !givenFeedback && isLastMessage && (h("div", { class: "feedback" }, 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, 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", { style: {
            "--klevu-slides-item-width": "200px;",
          } }, message.productData.products.map((product) => (h("klevu-product", { product: product, hideSwatches: true, onKlevuProductClick: (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.klevuChatProductClick.emit({
              product,
            });
            return false;
          } }, h("div", { slot: "bottom", class: "productactions" }, product.options.map((option) => (h("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 is() { return "klevu-chat-messages"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-chat-messages.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-chat-messages.css"]
    };
  }
  static get properties() {
    return {
      "messages": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "MoiMessages",
          "resolved": "(MoiResponseText | MoiResponseFilter | MoiProducts | MoiLocalMessage)[]",
          "references": {
            "MoiMessages": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::MoiMessages"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Messages received from Moi backend"
        },
        "defaultValue": "[]"
      },
      "feedbacks": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "MoiSavedFeedback[]",
          "resolved": "MoiSavedFeedback[] | undefined",
          "references": {
            "MoiSavedFeedback": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::MoiSavedFeedback"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Feedbacks given by user"
        }
      },
      "enableMessageFeedback": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Should display a feedback button after each message"
        },
        "attribute": "enable-message-feedback",
        "reflect": false
      },
      "showFeedbackFor": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "What message should we"
        },
        "attribute": "show-feedback-for",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuChatProductClick",
        "name": "klevuChatProductClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When product is clicked"
        },
        "complexType": {
          "original": "{ product: MoiProduct }",
          "resolved": "{ product: MoiProduct; }",
          "references": {
            "MoiProduct": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::MoiProduct"
            }
          }
        }
      }, {
        "method": "klevuSelectFilter",
        "name": "klevuSelectFilter",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When product filter is clicked"
        },
        "complexType": {
          "original": "{ message: MoiResponseFilter; filter: MoiResponseFilter[\"filter\"][\"options\"][0] }",
          "resolved": "{ message: MoiResponseFilter; filter: { count: string; name: string; selected: boolean | null; value: string; }; }",
          "references": {
            "MoiResponseFilter": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::MoiResponseFilter"
            }
          }
        }
      }, {
        "method": "klevuSelectProductOption",
        "name": "klevuSelectProductOption",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When product option is clicked"
        },
        "complexType": {
          "original": "{ product: MoiProduct; option: MoiProduct[\"options\"][0] }",
          "resolved": "{ product: MoiProduct; option: { chat: string; intent: string; name: string; }; }",
          "references": {
            "MoiProduct": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::MoiProduct"
            }
          }
        }
      }, {
        "method": "klevuMessageFeedback",
        "name": "klevuMessageFeedback",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When feedback is given"
        },
        "complexType": {
          "original": "onKlevuMessageFeedbackDetails",
          "resolved": "{ message: { id: string; note: string | null; type: \"text\"; value: string; collectFeedback?: boolean | undefined; }; feedback: \"up\" | \"down\"; }",
          "references": {
            "onKlevuMessageFeedbackDetails": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-chat-messages/klevu-chat-messages.tsx",
              "id": "src/components/klevu-chat-messages/klevu-chat-messages.tsx::onKlevuMessageFeedbackDetails"
            }
          }
        }
      }];
  }
}
//# sourceMappingURL=klevu-chat-messages.js.map
