import { Host, h } from "@stencil/core";
import { getTranslation } from "../../utils/getTranslation";
import { partsExports } from "../../utils/partsExports";
/**
 * Container for chat items. Very simple component, just a wrapper.
 * @slot default - The content of the chat bubble
 * @csspart chat-bubble-base The container for the chat bubble
 * @csspart chat-bubble-positive-feedback The positive feedback section
 * @csspart chat-bubble-negative-feedback The negative feedback section
 * @csspart chat-bubble-feedback-reasons The feedback reasons section
 */
export class KlevuChatBubble {
  constructor() {
    this.remote = undefined;
    this.feedback = undefined;
    this.feedbackReasons = undefined;
    this.tRatingReason = getTranslation("chatBubble.tRatingReason");
  }
  render() {
    var _a, _b, _c;
    return (h(Host, { class: {
        remote: Boolean(this.remote),
      } }, h("div", { part: "chat-bubble-base" }, h("klevu-typography", { variant: "body-s" }, h("slot", null)), ((_a = this.feedback) === null || _a === void 0 ? void 0 : _a.thumbs) === "up" && (h("div", null, h("klevu-icon", { part: "chat-bubble-positive-feedback", class: "positive_feedback", name: "thumb_up" }))), ((_b = this.feedback) === null || _b === void 0 ? void 0 : _b.thumbs) === "down" && (h("klevu-icon", { part: "chat-bubble-negative-feedback", class: "negative_feedback", name: "thumb_down" })), !Boolean((_c = this.feedback) === null || _c === void 0 ? void 0 : _c.reason) && this.feedbackReasons && (h("div", { class: "feedback_reasons", part: "chat-bubble-feedback-reasons" }, h("span", null, this.tRatingReason), this.feedbackReasons.map((reason) => (h("klevu-button", { exportparts: partsExports("klevu-button"), size: "tiny", isSecondary: true, onClick: () => {
        this.klevuMessageFeedbackReason.emit({ reason, feedback: this.feedback });
      } }, reason))))))));
  }
  static get is() { return "klevu-chat-bubble"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-chat-bubble.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-chat-bubble.css"]
    };
  }
  static get properties() {
    return {
      "remote": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Is the message from the user or from the bot"
        },
        "attribute": "remote",
        "reflect": false
      },
      "feedback": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "MoiSavedFeedback",
          "resolved": "undefined | { id: string; thumbs: \"up\" | \"down\"; reason?: string | undefined; }",
          "references": {
            "MoiSavedFeedback": {
              "location": "import",
              "path": "@klevu/core",
              "id": "../klevu-core/dist/cjs/index.d.ts::MoiSavedFeedback"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Has user given feedback to this message"
        }
      },
      "feedbackReasons": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "string[]",
          "resolved": "string[] | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "List of feedback reasons to show after the message"
        }
      },
      "tRatingReason": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Text for rating reason title"
        },
        "attribute": "t-rating-reason",
        "reflect": false,
        "defaultValue": "getTranslation(\"chatBubble.tRatingReason\")"
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuMessageFeedbackReason",
        "name": "klevuMessageFeedbackReason",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "KlevuMessageFeedbackReasonDetails",
          "resolved": "{ reason: string; feedback: MoiSavedFeedback; }",
          "references": {
            "KlevuMessageFeedbackReasonDetails": {
              "location": "local",
              "path": "/home/runner/work/frontend-sdk/frontend-sdk/packages/klevu-ui/src/components/klevu-chat-bubble/klevu-chat-bubble.tsx",
              "id": "src/components/klevu-chat-bubble/klevu-chat-bubble.tsx::KlevuMessageFeedbackReasonDetails"
            }
          }
        }
      }];
  }
}
//# sourceMappingURL=klevu-chat-bubble.js.map
