import { jsxs, jsx } from "react/jsx-runtime";
import default_1 from "../../../../../node_modules/@mui/icons-material/Block.js";
import DOMPurify from "dompurify";
import { getAssetUrl } from "../../../../../utils/assetBase.js";
import { Avatar } from "../../../../Avatar/index.js";
import { ChatAvatar } from "../AvatarGroup/AvatarGroup.js";
import { ChatInput } from "../ChatInput/ChatInput.js";
/* empty css                      */
const DEFAULT_CHAT_AVATAR = getAssetUrl("avatar_sample.webp");
const renderContent = (content) => {
  if (!content) return null;
  if (typeof content === "string") {
    const hasHtmlTags = /<[^>]*>/g.test(content);
    if (hasHtmlTags) {
      const sanitizedContent = DOMPurify.sanitize(content, {
        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-html",
          dangerouslySetInnerHTML: { __html: sanitizedContent }
        }
      );
    } else {
      return /* @__PURE__ */ jsx("span", { children: content });
    }
  } else {
    return content;
  }
};
const MessageItem = ({ type, msg, onMessageClick }) => {
  const isPinned = type === "pinned";
  const isDeleted = (msg == null ? void 0 : msg.type) === "deleted" || (msg == null ? void 0 : msg.deleted) === true;
  const handleClick = () => {
    if (onMessageClick && (msg == null ? void 0 : msg.id)) {
      onMessageClick(msg.id);
    }
  };
  if (isDeleted) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: isPinned ? "pinned-message" : "thread-message",
        style: { cursor: "pointer" },
        onClick: handleClick,
        children: [
          isPinned ? /* @__PURE__ */ jsx(
            Avatar,
            {
              label: msg == null ? void 0 : msg.userInitials,
              size: "small",
              src: (msg == null ? void 0 : msg.src) || DEFAULT_CHAT_AVATAR,
              type: "withoutPicture"
            }
          ) : /* @__PURE__ */ jsx(ChatAvatar, { name: msg == null ? void 0 : msg.userInitials, size: "sm", src: (msg == null ? void 0 : msg.src) || DEFAULT_CHAT_AVATAR }),
          /* @__PURE__ */ jsxs("div", { className: isPinned ? "pinned-info" : "thread-info", children: [
            isPinned && /* @__PURE__ */ jsxs("div", { className: "pinned-meta", children: [
              /* @__PURE__ */ jsx("span", { className: "user-title", children: msg.senderName }),
              type === "pinned" && /* @__PURE__ */ jsx("span", { className: "pinned-time", children: msg.timestamp })
            ] }),
            /* @__PURE__ */ jsx("div", { className: isPinned ? "pinned-text" : "thread-text", children: /* @__PURE__ */ jsxs("div", { className: "deleted-message-content", children: [
              /* @__PURE__ */ jsx(default_1, { className: "delete-icon" }),
              /* @__PURE__ */ jsx("span", { className: "deleted-text", children: "Message deleted by its author" })
            ] }) }),
            type === "thread" && /* @__PURE__ */ jsx("span", { className: "thread-time", children: msg.timestamp })
          ] })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: isPinned ? "pinned-message" : "thread-message",
      style: { cursor: "pointer" },
      onClick: handleClick,
      children: [
        isPinned ? /* @__PURE__ */ jsx(
          Avatar,
          {
            label: msg == null ? void 0 : msg.userInitials,
            size: "small",
            src: (msg == null ? void 0 : msg.src) || DEFAULT_CHAT_AVATAR,
            type: "withoutPicture"
          }
        ) : /* @__PURE__ */ jsx(ChatAvatar, { name: msg == null ? void 0 : msg.userInitials, size: "sm", src: (msg == null ? void 0 : msg.src) || DEFAULT_CHAT_AVATAR }),
        /* @__PURE__ */ jsxs("div", { className: isPinned ? "pinned-info" : "thread-info", children: [
          isPinned && /* @__PURE__ */ jsxs("div", { className: "pinned-meta", children: [
            /* @__PURE__ */ jsx("span", { className: "user-title", children: msg.senderName }),
            type === "pinned" && /* @__PURE__ */ jsx("span", { className: "pinned-time", children: msg.timestamp })
          ] }),
          !isPinned && msg.quote && /* @__PURE__ */ jsxs("div", { className: "thread-quote-container", children: [
            /* @__PURE__ */ jsx("p", { className: "thread_title", children: msg.senderName }),
            /* @__PURE__ */ jsx("blockquote", { className: "thread-quote", children: renderContent(msg.quote) })
          ] }),
          /* @__PURE__ */ jsx("div", { className: isPinned ? "pinned-text" : "thread-text", children: renderContent(msg.content) }),
          type === "thread" && /* @__PURE__ */ jsxs("span", { className: "thread-time", children: [
            msg.timestamp,
            msg.edited && /* @__PURE__ */ jsx("span", { className: "edited-label", children: " (edited)" })
          ] })
        ] })
      ]
    }
  );
};
const PinnedPanel = ({
  type = "pinned",
  // "pinned" or "thread"
  messages = [],
  onClose,
  onMessageClick
  // Handler when a message is clicked
}) => {
  const isPinned = type === "pinned";
  return /* @__PURE__ */ jsxs("div", { className: "pinned-panel", children: [
    /* @__PURE__ */ jsxs("div", { className: "pinned-panel-header", children: [
      /* @__PURE__ */ jsx("h1", { className: "header-title", children: isPinned ? "Pinned" : "Thread" }),
      /* @__PURE__ */ jsx("button", { className: "close-btn", onClick: onClose, children: isPinned ? "Close" : "Close thread" })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "pinned-panel-content", children: [
      isPinned && /* @__PURE__ */ jsx("h4", { className: "pinned-title", children: "Pinned message" }),
      messages.map((msg, idx) => /* @__PURE__ */ jsx(MessageItem, { msg, type, onMessageClick }, msg.id))
    ] }),
    type === "thread" && /* @__PURE__ */ jsx(
      ChatInput,
      {
        maxLength: 500,
        placeholder: "Thread Msg",
        quickActionLabel: "Quick Action",
        showFormatting: true,
        showQuickAction: true,
        value: "",
        onAttach: "",
        onChange: () => {
        },
        onEmojiClick: () => {
        },
        onImageUpload: "",
        onSend: () => {
        }
      }
    )
  ] });
};
export {
  PinnedPanel
};
