import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import DOMPurify from "dompurify";
import { getAssetUrl } from "../../../../../utils/assetBase.js";
import { Button } from "../../../../Button/index.js";
/* empty css                                   */
const PinnedIcon = getAssetUrl("icons/pinedIcon.svg");
const TreadChatIcon = getAssetUrl("icons/treadChatIcon.svg");
const ThreeDotIcon = getAssetUrl("icons/treedotIcon.svg");
const UnpinIcon = getAssetUrl("icons/unpinedIcon.svg");
const CheckBlueIcon = getAssetUrl("icons/checkBlueIcon.svg");
const WarningRedIcon = getAssetUrl("icons/warningRedIcon.svg");
const ThumbsUpYellowIcon = getAssetUrl("icons/thumbsUpYellowIcon.svg");
const NotAllowedGreenIcon = getAssetUrl("icons/notAllowedGreenIcon.svg");
const ChatDefaultMessageType = ({
  content,
  timestamp,
  handleClickOnMoreOptions,
  priority = "default",
  edited = false,
  onThreadClick,
  pinned,
  visibility,
  onPin,
  isUser = true,
  isThreadIconVisible,
  isPinChatIconvisible,
  isHighlighted = false,
  highlightColor = null
}) => {
  const renderContent = (content2) => {
    if (typeof content2 === "string") {
      const hasHtmlTags = /<[^>]*>/g.test(content2);
      if (hasHtmlTags) {
        const sanitizedContent = DOMPurify.sanitize(content2, {
          ALLOWED_TAGS: [
            "p",
            "span",
            "strong",
            "em",
            "u",
            "br",
            "a",
            "ul",
            "ol",
            "li",
            "h1",
            "h2",
            "h3",
            "h4",
            "h5",
            "h6",
            "s",
            "mark"
          ],
          ALLOWED_ATTR: [
            "class",
            "data-type",
            "data-id",
            "data-label",
            "data-mention-suggestion-char",
            "href",
            "target",
            "rel"
          ]
        });
        return /* @__PURE__ */ jsx("div", { className: "message-content", dangerouslySetInnerHTML: { __html: sanitizedContent } });
      } else {
        return /* @__PURE__ */ jsx("p", { children: content2 });
      }
    } else {
      return content2;
    }
  };
  const [showPinned, setShowPinned] = useState(pinned);
  const customHighlightStyle = isHighlighted && highlightColor ? {
    borderColor: highlightColor,
    boxShadow: `0px 0px 8px ${highlightColor}40`
    // 40 is 25% opacity in hex
  } : {};
  const handlePin = async (isPinned) => {
    try {
      const pinnedResponse = await onPin(isPinned);
      setShowPinned(pinnedResponse == null ? void 0 : pinnedResponse.isPinned);
    } catch (error) {
      console.error("Error pinning message:", error);
    }
  };
  useEffect(() => {
    setShowPinned(pinned);
  }, [pinned]);
  const priorityContent = {
    normal: /* @__PURE__ */ jsxs("span", { className: "priority-label", children: [
      /* @__PURE__ */ jsx("img", { alt: "checkBlueIcon", src: CheckBlueIcon }),
      " Normal Priority"
    ] }),
    high: /* @__PURE__ */ jsxs("span", { className: "priority-label", children: [
      /* @__PURE__ */ jsx("img", { alt: "warningRedIcon", src: WarningRedIcon }),
      " High Priority"
    ] }),
    medium: /* @__PURE__ */ jsxs("span", { className: "priority-label", children: [
      /* @__PURE__ */ jsx("img", { alt: "thumbsUpYellowIcon", src: ThumbsUpYellowIcon }),
      " Medium Priority"
    ] }),
    low: /* @__PURE__ */ jsxs("span", { className: "priority-label", children: [
      /* @__PURE__ */ jsx("img", { alt: "notAllowedGreenIcon", src: NotAllowedGreenIcon }),
      " Low Priority"
    ] })
  };
  const pinnedIconSrc = showPinned ? PinnedIcon : UnpinIcon;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: `message-text ${priority} ${isHighlighted ? "highlighted-message-content" : ""}`,
      style: customHighlightStyle,
      children: [
        /* @__PURE__ */ jsx("section", { className: "priority-container", children: priorityContent[priority] }),
        renderContent(content),
        /* @__PURE__ */ jsxs("div", { className: `message-header ${!isUser ? "flex-end" : ""}`, children: [
          isUser ? /* @__PURE__ */ jsxs("div", { className: `message-action-container ${visibility ? "visibility-enabled" : ""}`, children: [
            /* @__PURE__ */ jsx(
              Button,
              {
                className: "btn_border_default participants-button",
                icon: /* @__PURE__ */ jsx("img", { alt: "more", src: ThreeDotIcon }),
                iconPlacement: "left",
                size: "small",
                type: "default",
                variant: "tertiary",
                onClick: handleClickOnMoreOptions
              }
            ),
            isThreadIconVisible && /* @__PURE__ */ jsx(
              Button,
              {
                className: "btn_border_default participants-button",
                icon: /* @__PURE__ */ jsx("img", { alt: "thread", src: TreadChatIcon }),
                iconPlacement: "left",
                size: "large",
                type: "default",
                variant: "tertiary",
                onClick: onThreadClick
              }
            )
          ] }) : null,
          /* @__PURE__ */ jsxs("div", { className: "message-action-info-container", children: [
            /* @__PURE__ */ jsxs("div", { style: { display: !isPinChatIconvisible ? "none" : "inline" }, children: [
              showPinned && /* @__PURE__ */ jsx(
                Button,
                {
                  className: "pin-button",
                  icon: /* @__PURE__ */ jsx("img", { src: pinnedIconSrc }),
                  iconPlacement: "left",
                  size: "small",
                  type: "default",
                  variant: "tertiary",
                  onClick: () => {
                    handlePin(!showPinned);
                  }
                }
              ),
              !showPinned && /* @__PURE__ */ jsx(
                Button,
                {
                  className: "pin-button-hover",
                  icon: /* @__PURE__ */ jsx("img", { src: PinnedIcon }),
                  iconPlacement: "left",
                  size: "small",
                  type: "default",
                  variant: "tertiary",
                  onClick: () => {
                    handlePin(!showPinned);
                  }
                }
              )
            ] }),
            /* @__PURE__ */ jsxs("span", { className: "message-timestamp", children: [
              timestamp,
              edited && /* @__PURE__ */ jsx("span", { className: "edited-label", children: " (edited)" })
            ] })
          ] })
        ] })
      ]
    }
  );
};
export {
  ChatDefaultMessageType as default
};
