import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import React__default, { useRef, useState, useCallback, useEffect } from "react";
import { getAssetUrl } from "../../../../utils/assetBase.js";
import { ChatHeader } from "./ChatHeader/ChatHeader.js";
import { ChatInput } from "./ChatInput/ChatInput.js";
import { ChatMessage } from "./ChatMessages/ChatMessage.js";
import { DateSeparator } from "./DateSeparator/DateSeparator.js";
import { Avatar } from "../../../Avatar/index.js";
import { Button } from "../../../Button/index.js";
import { Checkbox } from "../../../Checkbox/index.js";
import { Input } from "../../../Input/index.js";
import { Loader } from "../../../Loader/index.js";
import { Modal } from "../../../Modal/index.js";
import { Prompt } from "../../../Prompt/index.js";
import { EmptyContainer } from "../../EmptyContainer.js";
import useInfiniteScroll from "../../hooks/useInfiniteScroll.js";
import ChatMessageListSkeleton from "../ChatMessageSkeleton/ChatMessageListSkeleton.js";
/* empty css                                  */
const SearchIcon = getAssetUrl("icons/searchIcon.svg");
const TableChatRightSection = ({
  // Header props
  title,
  chatId,
  CreatedBy,
  participants = [],
  participantsList = [],
  onParticipantsClick,
  // Messages props
  messages: propMessages = [],
  // Input props
  placeholder = "Type message",
  showFormatting = true,
  maxLength = 5e3,
  // // Event handlers
  // onSend,
  onMessageReply,
  onMessageBookmark,
  onMessagePin,
  onMessageMore,
  onAttachFile,
  onImageUpload,
  onEmojiClick,
  setPinnedMessages,
  // Customization
  className = "",
  showDateSeparators = true,
  autoScroll = true,
  onThreadClick,
  // External configuration
  messageConfig = {},
  inputChatConfig = {},
  ...restProps
}) => {
  var _a, _b;
  console.log("showQuickAction", inputChatConfig);
  const messagesRef = useRef(null);
  const isLoadingRef = useRef(false);
  const [inputValue, setInputValue] = useState("");
  const [messages, setMessages] = useState(propMessages);
  const [showClearChat, setShowClearChat] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [editingMessage, setEditingMessage] = useState(null);
  const [searchResults, setSearchResults] = useState([]);
  const [isSearchActive, setIsSearchActive] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [isSearchLoading, setIsSearchLoading] = useState(false);
  const [isClearChatLoading, setIsClearChatLoading] = useState(false);
  const [addMembers, setAddMembers] = useState([]);
  const [memberList, setMemberList] = useState([]);
  const [showAddMembers, setShowAddMembers] = useState(false);
  const [showAddMembersLoading, setShowAddMembersLoading] = useState(false);
  const [externalSavingMembers, setExternalSavingMembers] = useState(false);
  const [memberSearchQuery, setMemberSearchQuery] = useState("");
  const [filteredMemberList, setFilteredMemberList] = useState([]);
  const [highlightedMessageId, setHighlightedMessageId] = useState(null);
  const searchCompletedRef = useRef(false);
  const currentChatIdRef = useRef(null);
  const lastHighlightedMessageIdRef = useRef(null);
  const realTimeMessages = messageConfig.realTimeMessages || [];
  messageConfig.isWebSocketConnected || false;
  const currentTopicId = messageConfig.currentTopicId || null;
  const onRealTimeMessageUpdate = messageConfig.onRealTimeMessageUpdate || null;
  const currentUserId = messageConfig.currentUserId || null;
  const selectedMessageId = messageConfig.selectedMessageId || null;
  const maxSearchPages = messageConfig.maxSearchPages || 3;
  const highlightDuration = messageConfig.highlightDuration || 3e3;
  const scrollBehavior = messageConfig.scrollBehavior || "smooth";
  const scrollBlock = messageConfig.scrollBlock || "center";
  const highlightColor = messageConfig.highlightColor || null;
  const highlightTrigger = messageConfig.highlightTrigger;
  const fetchMoreMessages = useCallback(
    async (page) => {
      if (!messageConfig.loadMessages || !chatId) {
        return [];
      }
      try {
        const result = await messageConfig.loadMessages(chatId, page);
        let newMessages, noMoreData;
        if (Array.isArray(result)) {
          newMessages = result;
          noMoreData = !result || result.length === 0;
        } else {
          newMessages = (result == null ? void 0 : result.messages) || [];
          noMoreData = (result == null ? void 0 : result.noMoreData) || false;
        }
        if (noMoreData) {
          return [];
        }
        if (!newMessages || newMessages.length === 0) {
          return [];
        }
        setMessages((prevMessages) => {
          const existingIds = new Set(prevMessages.map((msg) => msg.id));
          const uniqueNewMessages = newMessages.filter((msg) => !existingIds.has(msg.id));
          return [...uniqueNewMessages, ...prevMessages];
        });
        return newMessages;
      } catch (error) {
        console.error("[TableChatRightSection] Error fetching more messages:", error);
        return [];
      }
    },
    [messageConfig.loadMessages, chatId]
  );
  const [enableInfiniteScroll, setEnableInfiniteScroll] = useState(false);
  const {
    loadMoreRef,
    isLoading: isLoadingMore,
    hasMore,
    error: infiniteScrollError,
    reset: resetInfiniteScroll,
    updateHasMore,
    updateCurrentPage,
    // Update page when manually loading pages
    currentPage
    // Track current page for smart message searching
  } = useInfiniteScroll(fetchMoreMessages, {
    threshold: 0.1,
    rootMargin: "200px 0px 0px 0px",
    // Only trigger when scrolling near the top
    enabled: enableInfiniteScroll && !!chatId
  });
  useEffect(() => {
    if (chatId) {
      const timer = setTimeout(() => {
        setEnableInfiniteScroll(true);
      }, 2e3);
      return () => {
        clearTimeout(timer);
      };
    } else {
      setEnableInfiniteScroll(false);
    }
  }, [chatId]);
  useEffect(() => {
    const trigger = messageConfig.messagesClearedTrigger;
    if (trigger && trigger > 0 && chatId) {
      setMessages([]);
      resetInfiniteScroll();
      updateHasMore(false);
      const reloadFromAPI = async () => {
        try {
          if (messageConfig.loadMessages && chatId) {
            const result = await messageConfig.loadMessages(
              chatId,
              1
              // Start with page 1
            );
            let reloadedMessages;
            if (Array.isArray(result)) {
              reloadedMessages = result;
            } else {
              reloadedMessages = (result == null ? void 0 : result.messages) || [];
            }
            if (reloadedMessages && reloadedMessages.length > 0) {
              setMessages(reloadedMessages);
              updateHasMore(true);
            } else {
              console.log("[TableChatRightSection] API confirmed messages are cleared");
            }
          }
        } catch (error) {
          console.error("[TableChatRightSection] Error reloading messages after clear:", error);
        }
      };
      setTimeout(reloadFromAPI, 1e3);
    }
  }, [
    messageConfig.messagesClearedTrigger,
    chatId,
    messageConfig.loadMessages,
    resetInfiniteScroll,
    updateHasMore
  ]);
  useEffect(() => {
    const loadMessages = async () => {
      if (isLoadingRef.current) {
        return;
      }
      if (chatId && messageConfig.loadMessages) {
        isLoadingRef.current = true;
        if (currentChatIdRef.current !== chatId) {
          searchCompletedRef.current = false;
          lastHighlightedMessageIdRef.current = null;
          currentChatIdRef.current = chatId;
        }
        try {
          setEnableInfiniteScroll(false);
          resetInfiniteScroll();
          const result = await messageConfig.loadMessages(
            chatId,
            1
            // Start with page 1
          );
          let initialMessages;
          if (Array.isArray(result)) {
            initialMessages = result;
          } else {
            initialMessages = (result == null ? void 0 : result.messages) || [];
          }
          setMessages(initialMessages || []);
          if (!initialMessages || initialMessages.length === 0) {
            updateHasMore(false);
          }
        } catch (error) {
          console.error("[TableChatRightSection] Error loading messages:", error);
          setMessages([]);
        } finally {
          isLoadingRef.current = false;
        }
      } else {
        setMessages([]);
      }
    };
    loadMessages();
    return () => {
      isLoadingRef.current = false;
    };
  }, [chatId, resetInfiniteScroll, updateHasMore]);
  useEffect(() => {
    if (!selectedMessageId || !chatId) {
      return;
    }
    if (messages.length === 0) {
      return;
    }
    const isPinnedMessageHighlight = highlightTrigger !== null && highlightTrigger !== void 0;
    if (!isPinnedMessageHighlight && lastHighlightedMessageIdRef.current === selectedMessageId) {
      return;
    }
    const messageExistsImmediately = messages.some((msg) => msg.id === selectedMessageId);
    if (messageExistsImmediately) {
      if (!isPinnedMessageHighlight) {
        lastHighlightedMessageIdRef.current = selectedMessageId;
      }
      setEnableInfiniteScroll(false);
      setTimeout(() => {
        scrollToMessage(selectedMessageId);
        setHighlightedMessageId(selectedMessageId);
        setTimeout(() => {
          setHighlightedMessageId(null);
        }, highlightDuration);
        setTimeout(() => {
          setEnableInfiniteScroll(true);
        }, 2e3);
      }, 100);
      return;
    }
    setEnableInfiniteScroll(false);
    findAndHighlightMessage();
    async function findAndHighlightMessage() {
      if (searchCompletedRef.current) {
        setEnableInfiniteScroll(true);
        return;
      }
      searchCompletedRef.current = true;
      const startPage = currentPage + 1;
      if (currentPage >= maxSearchPages) {
        setEnableInfiniteScroll(true);
        return;
      }
      let messageFoundInSearch = false;
      try {
        for (let page = startPage; page <= maxSearchPages; page++) {
          if (messageFoundInSearch) {
            break;
          }
          if (!messageConfig.loadMessages) break;
          const result = await messageConfig.loadMessages(chatId, page);
          let pageMessages;
          if (Array.isArray(result)) {
            pageMessages = result;
          } else {
            pageMessages = (result == null ? void 0 : result.messages) || [];
          }
          if (!pageMessages || pageMessages.length === 0) {
            break;
          }
          const foundMessage = pageMessages.find((msg) => msg.id === selectedMessageId);
          if (foundMessage) {
            messageFoundInSearch = true;
            if (!isPinnedMessageHighlight) {
              lastHighlightedMessageIdRef.current = selectedMessageId;
            }
            updateCurrentPage(page);
            setMessages((prevMessages) => {
              const existingIds = new Set(prevMessages.map((msg) => msg.id));
              const uniqueNewMessages = pageMessages.filter((msg) => !existingIds.has(msg.id));
              return [...uniqueNewMessages, ...prevMessages];
            });
            requestAnimationFrame(() => {
              requestAnimationFrame(() => {
                setTimeout(() => {
                  scrollToMessage(selectedMessageId);
                  setHighlightedMessageId(selectedMessageId);
                  setTimeout(() => {
                    setHighlightedMessageId(null);
                  }, highlightDuration);
                  setTimeout(() => {
                    setEnableInfiniteScroll(true);
                  }, 2e3);
                }, 300);
              });
            });
            break;
          }
        }
        if (!messageFoundInSearch) {
          setEnableInfiniteScroll(true);
        }
      } catch (error) {
        console.error("[TableChatRightSection] Error searching for message:", error);
        setEnableInfiniteScroll(true);
      }
    }
  }, [selectedMessageId, chatId, messages.length, highlightTrigger]);
  const scrollToMessage = (messageId) => {
    const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
    if (messageElement && messagesRef.current) {
      messageElement.scrollIntoView({
        behavior: scrollBehavior,
        block: scrollBlock
      });
    }
  };
  useEffect(() => {
    if (autoScroll && messagesRef.current) {
      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
    }
  }, [messages.length, autoScroll]);
  useEffect(() => {
    if (realTimeMessages.length > 0 && chatId === currentTopicId) {
      setMessages((prevMessages) => {
        const existingMessagesMap = new Map(prevMessages.map((msg) => [msg.id, msg]));
        const updatedMessages = [...prevMessages];
        let hasChanges = false;
        realTimeMessages.forEach((realTimeMsg) => {
          var _a2, _b2, _c, _d;
          const existingMsg = existingMessagesMap.get(realTimeMsg.id);
          if (existingMsg) {
            const msgIndex = updatedMessages.findIndex((msg) => msg.id === realTimeMsg.id);
            if (msgIndex !== -1) {
              updatedMessages[msgIndex] = {
                ...updatedMessages[msgIndex],
                ...realTimeMsg,
                // Preserve some original properties that shouldn't be overwritten
                author: realTimeMsg.author || updatedMessages[msgIndex].author,
                authorName: realTimeMsg.authorName || updatedMessages[msgIndex].authorName,
                senderId: realTimeMsg.senderId || updatedMessages[msgIndex].senderId,
                // Preserve deleted state
                deleted: realTimeMsg.deleted !== void 0 ? realTimeMsg.deleted : updatedMessages[msgIndex].deleted,
                otherProps: {
                  ...updatedMessages[msgIndex].otherProps,
                  ...realTimeMsg.otherProps,
                  sender_id: ((_a2 = realTimeMsg.otherProps) == null ? void 0 : _a2.sender_id) || ((_b2 = updatedMessages[msgIndex].otherProps) == null ? void 0 : _b2.sender_id),
                  // Preserve deleted state in otherProps as well
                  deleted: ((_c = realTimeMsg.otherProps) == null ? void 0 : _c.deleted) !== void 0 ? realTimeMsg.otherProps.deleted : (_d = updatedMessages[msgIndex].otherProps) == null ? void 0 : _d.deleted
                }
              };
              hasChanges = true;
            }
          } else {
            updatedMessages.push(realTimeMsg);
            hasChanges = true;
          }
        });
        if (hasChanges) {
          const sortedMessages = updatedMessages.sort((a, b) => {
            var _a2, _b2;
            const timeA = new Date(
              a.timestamp || a.date || a.created_at || ((_a2 = a.otherProps) == null ? void 0 : _a2.created_at)
            );
            const timeB = new Date(
              b.timestamp || b.date || b.created_at || ((_b2 = b.otherProps) == null ? void 0 : _b2.created_at)
            );
            return timeA - timeB;
          });
          if (autoScroll) {
            setTimeout(() => {
              if (messagesRef.current) {
                messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
              }
            }, 100);
          }
          return sortedMessages;
        }
        return prevMessages;
      });
    }
  }, [realTimeMessages, chatId, currentTopicId, autoScroll]);
  const handleSend = async (payload) => {
    if (isEditMode && editingMessage) {
      await handleUpdateMessage(payload);
    } else if (inputChatConfig.onSend) {
      try {
        const response = await inputChatConfig.onSend(payload, chatId);
        if (onRealTimeMessageUpdate && response) {
          onRealTimeMessageUpdate(response);
        }
        setInputValue("");
      } catch (error) {
        console.error("Error sending message:", error);
      }
    } else {
      setInputValue("");
    }
  };
  const handleUpdateMessage = async (updatedContent) => {
    var _a2;
    if (messageConfig.onMessageUpdate && editingMessage) {
      try {
        const response = await messageConfig.onMessageUpdate(editingMessage.id, updatedContent);
        exitEditMode();
        const isRealTimeMessage = editingMessage.isRealTime || ((_a2 = editingMessage.otherProps) == null ? void 0 : _a2.isRealTime);
        if (isRealTimeMessage) {
          if (onRealTimeMessageUpdate && response) {
            onRealTimeMessageUpdate(response);
          }
        } else {
          if (response) {
            setMessages((prevMessages) => {
              return prevMessages.map((msg) => {
                if (msg.id === editingMessage.id) {
                  return response;
                }
                return msg;
              });
            });
          }
        }
      } catch (error) {
        console.error("Error updating message:", error);
      }
    }
  };
  const handleEditMessage = (message) => {
    setIsEditMode(true);
    setEditingMessage(message);
    setInputValue(message.content || "");
  };
  const exitEditMode = () => {
    setIsEditMode(false);
    setEditingMessage(null);
    setInputValue("");
  };
  const handleReply = async (messageId) => {
    if (inputChatConfig.onMessageReply) {
      await inputChatConfig.onMessageReply(messageId, chatId);
    }
  };
  const handleBookmark = async (messageId) => {
    if (inputChatConfig.onMessageBookmark) {
      await inputChatConfig.onMessageBookmark(messageId, chatId);
    }
  };
  const handlePin = async (messageId, pinned, chatId2, item) => {
    var _a2;
    try {
      const response = await ((_a2 = messageConfig.onMessagePin) == null ? void 0 : _a2.call(messageConfig, messageId, pinned, chatId2, item));
      return response;
    } catch (error) {
      console.error("Error pinning message:", error);
    }
  };
  const handleMore = async (messageId) => {
    if (inputChatConfig.onMessageMore) {
      await inputChatConfig.onMessageMore(messageId, chatId);
    }
  };
  const markMessageAsDeleted = (messageId) => {
    setMessages((prevMessages) => {
      return prevMessages.map((msg) => {
        if (msg.id === messageId) {
          return {
            ...msg,
            deleted: true,
            // Keep original content for display purposes
            content: msg.content,
            // Preserve all important fields for proper rendering
            timestamp: msg.timestamp,
            date: msg.date,
            created_at: msg.created_at,
            author: msg.author,
            authorName: msg.authorName,
            senderId: msg.senderId,
            otherProps: {
              ...msg.otherProps,
              deleted: true
            }
          };
        }
        return msg;
      });
    });
  };
  const handleSearchMessage = useCallback(
    async (searchValue, chatId2) => {
      if (!searchValue || searchValue.trim() === "") {
        setSearchResults([]);
        setIsSearchActive(false);
        setSearchQuery("");
        setIsSearchLoading(false);
        return;
      }
      try {
        setIsSearchActive(true);
        setSearchQuery(searchValue);
        setIsSearchLoading(true);
        if (messageConfig.onSearchMessage) {
          const results = await messageConfig.onSearchMessage(searchValue, chatId2);
          setSearchResults(results || []);
        }
      } catch (error) {
        console.error("[TableChatRightSection] Search error:", error);
        setSearchResults([]);
      } finally {
        setIsSearchLoading(false);
      }
    },
    [messageConfig.onSearchMessage]
  );
  const handleSearchClear = useCallback(() => {
    setSearchResults([]);
    setIsSearchActive(false);
    setSearchQuery("");
    setIsSearchLoading(false);
  }, []);
  const groupMessagesByDate = (messages2) => {
    const grouped = [];
    let currentDate = null;
    messages2.forEach((msg) => {
      const raw = msg.date || msg.timestamp;
      const parsed = new Date(raw);
      if (isNaN(parsed)) return;
      const rawDate = parsed.toISOString().split("T")[0];
      if (rawDate !== currentDate) {
        currentDate = rawDate;
        grouped.push({
          type: "date-separator",
          id: `date-${rawDate}-${msg.id}`,
          date: parsed,
          // 👈 pass Date object
          pinned: msg.pinned
        });
      }
      grouped.push(msg);
    });
    return grouped;
  };
  const handleAllMessagesDelete = useCallback(async () => {
    try {
      if (messageConfig.onClearAllMessages && chatId) {
        setIsClearChatLoading(true);
        const response = await messageConfig.onClearAllMessages(chatId);
        setIsClearChatLoading(false);
        setMessages([]);
        setShowClearChat(false);
      }
    } catch (error) {
      console.error("Error clearing all messages:", error);
      setShowClearChat(false);
    }
  }, [
    messageConfig.onClearAllMessages,
    messageConfig.loadMessages,
    resetInfiniteScroll,
    updateHasMore
  ]);
  const handleMessageDelete = useCallback(
    async (messageId) => {
      var _a2, _b2;
      try {
        const response = await ((_a2 = messageConfig.onMessageDelete) == null ? void 0 : _a2.call(messageConfig, messageId));
        if (response == null ? void 0 : response.isPinned) {
          setPinnedMessages(
            (prevPinnedMessages) => prevPinnedMessages.map((msg) => msg.id === messageId ? { ...response } : msg)
          );
        }
        const messageToDelete = messages.find((msg) => msg.id === messageId);
        const isRealTimeMessage = (messageToDelete == null ? void 0 : messageToDelete.isRealTime) || ((_b2 = messageToDelete == null ? void 0 : messageToDelete.otherProps) == null ? void 0 : _b2.isRealTime);
        if (isRealTimeMessage) {
          if (onRealTimeMessageUpdate && response) {
            const deletedMessage = response;
            onRealTimeMessageUpdate(deletedMessage);
          }
        } else {
          markMessageAsDeleted(messageId);
        }
        return response;
      } catch (error) {
        console.error("[TableChatRightSection] Error deleting message:", error);
        throw error;
      }
    },
    [messages, messageConfig.onMessageDelete, onRealTimeMessageUpdate]
  );
  const loadMemberList = async () => {
    var _a2, _b2;
    const options = await ((_b2 = (_a2 = restProps.chatHeaderConfig) == null ? void 0 : _a2.loadParticipants) == null ? void 0 : _b2.call(_a2, "new", chatId));
    if (options) {
      setMemberList(options);
      setFilteredMemberList(options);
    }
  };
  const handleMemberSearch = useCallback(
    (searchValue) => {
      setMemberSearchQuery(searchValue);
      if (!searchValue || searchValue.trim() === "") {
        setFilteredMemberList(memberList);
      } else {
        const filtered = memberList.filter(
          (member) => {
            var _a2;
            return (_a2 = member.label) == null ? void 0 : _a2.toLowerCase().includes(searchValue.toLowerCase());
          }
        );
        setFilteredMemberList(filtered);
      }
    },
    [memberList]
  );
  useEffect(() => {
    if (memberSearchQuery.trim() === "") {
      setFilteredMemberList(memberList);
    } else {
      handleMemberSearch(memberSearchQuery);
    }
  }, [memberList, memberSearchQuery, handleMemberSearch]);
  useEffect(() => {
    if (showAddMembers) {
      loadMemberList();
    } else {
      setMemberSearchQuery("");
      setFilteredMemberList([]);
    }
  }, [showAddMembers, chatId]);
  const addInChat = (value) => {
    setAddMembers((prev) => {
      if (prev.includes(value)) {
        return prev.filter((item) => item !== value);
      } else {
        return [...prev, value];
      }
    });
  };
  const messagesToDisplay = isSearchActive ? searchResults : messages;
  const groupedItems = groupMessagesByDate(messagesToDisplay);
  const saveMembersInChat = async () => {
    var _a2, _b2, _c;
    if ((_a2 = restProps.chatHeaderConfig) == null ? void 0 : _a2.onParticipantAdd) {
      try {
        setShowAddMembersLoading(true);
        const response = await ((_c = (_b2 = restProps.chatHeaderConfig) == null ? void 0 : _b2.onParticipantAdd) == null ? void 0 : _c.call(
          _b2,
          addMembers,
          "new",
          chatId
        ));
        if (response === null) {
          setShowAddMembersLoading(false);
          setExternalSavingMembers(true);
          setShowAddMembers(false);
          setAddMembers([]);
          setMemberSearchQuery("");
          setFilteredMemberList([]);
        }
      } catch (error) {
        console.error("Error saving members in chat:", error);
      } finally {
        setShowAddMembersLoading(false);
        setExternalSavingMembers(false);
      }
    }
  };
  return /* @__PURE__ */ jsxs("div", { className: `table-chat-right-section-container ${className}`, children: [
    chatId ? /* @__PURE__ */ jsx(
      ChatHeader,
      {
        chatHeaderConfig: {
          ...restProps.chatHeaderConfig,
          onSearchMessage: handleSearchMessage,
          onSearchClear: handleSearchClear,
          externalSavingMembers
        },
        chatId,
        createdBy: CreatedBy,
        title
      }
    ) : null,
    messages.length > 0 && /* @__PURE__ */ jsx("div", { className: "clear-chat-button-container", children: /* @__PURE__ */ jsx(
      Button,
      {
        className: "clear-chat-button",
        size: "small",
        variant: "text",
        onClick: (event) => {
          event.stopPropagation();
          setShowClearChat(true);
        },
        children: "Clear Chat"
      }
    ) }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        ref: messagesRef,
        className: `table-chat-messages ${groupedItems.length === 0 && !hasMore ? "empty-state-container" : ""}`,
        children: [
          hasMore && /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "infinite-scroll-trigger", children: isLoadingMore ? /* @__PURE__ */ jsx("div", { className: "infinite-scroll-loading", children: /* @__PURE__ */ jsx(Loader, { size: "medium" }) }) : /* @__PURE__ */ jsx("div", { className: "infinite-scroll-placeholder" }) }),
          isSearchLoading ? /* @__PURE__ */ jsx("div", { className: "table-chat-loading-state", children: /* @__PURE__ */ jsx(ChatMessageListSkeleton, { messageCount: 4 }) }) : groupedItems.length === 0 && !hasMore ? /* @__PURE__ */ jsx("div", { className: "table-chat-empty-state", children: isSearchActive ? /* @__PURE__ */ jsx(
            EmptyContainer,
            {
              subTitle: "Try searching for a different keyword.",
              title: `No messages found for "${searchQuery}"`
            }
          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              EmptyContainer,
              {
                subTitle: "Start the conversation by adding members to the chat.",
                title: "Not started the conversation yet!"
              }
            ),
            /* @__PURE__ */ jsx(
              Button,
              {
                disabled: showAddMembersLoading,
                size: "large",
                type: "default",
                variant: "secondary",
                onClick: () => setShowAddMembers(true),
                className: "add_member_btn",
                iconPlacement: "right",
                children: showAddMembersLoading ? "Adding..." : "Add members"
              }
            )
          ] }) }) : groupedItems.map((item) => {
            var _a2, _b2, _c;
            if (item.type === "date-separator") {
              return /* @__PURE__ */ jsx(DateSeparator, { date: item.date, format: "relative" }, item.id);
            }
            return /* @__PURE__ */ jsx("div", { className: "message-wrapper", "data-message-id": item.id, children: /* @__PURE__ */ jsx(
              ChatMessage,
              {
                author: item.author,
                authorAvatar: item.authorAvatar,
                authorName: item.authorName,
                content: item.content,
                deleted: item.deleted || ((_a2 = item.otherProps) == null ? void 0 : _a2.deleted) || false,
                edited: item.edited || false,
                isHighlighted: highlightedMessageId === item.id,
                isPinChatIconvisible: messageConfig == null ? void 0 : messageConfig.isPinChatIconVisible,
                isThreadIconVisible: messageConfig == null ? void 0 : messageConfig.isThreadIconVisible,
                messageId: item.id,
                pinned: item.isPinned,
                priority: item.priority,
                showActions: messageConfig.showActions ?? item.showActions !== false,
                timestamp: item.timestamp,
                type: item.type,
                onBookmark: () => {
                  handleBookmark(item.id);
                  onMessageBookmark == null ? void 0 : onMessageBookmark(item.id, chatId);
                },
                onEdit: () => handleEditMessage(item),
                onMessageDelete: handleMessageDelete,
                onMore: () => {
                  handleMore(item.id);
                  onMessageMore == null ? void 0 : onMessageMore(item.id, chatId);
                },
                onPin: async (pinned) => {
                  return await handlePin(item.id, pinned, chatId, item);
                },
                onRefetchMessages: async () => {
                  return messages;
                },
                onReply: () => {
                  handleReply(item.id);
                  onMessageReply == null ? void 0 : onMessageReply(item.id, chatId);
                },
                onThreadClick: () => {
                  var _a3;
                  onThreadClick == null ? void 0 : onThreadClick(item.id, chatId);
                  (_a3 = messageConfig == null ? void 0 : messageConfig.onThreadClick) == null ? void 0 : _a3.call(messageConfig, item.id, chatId);
                },
                highlightColor,
                isUser: currentUserId ? item.senderId === currentUserId || ((_b2 = item.otherProps) == null ? void 0 : _b2.sender_id) === currentUserId || item.senderId === String(currentUserId) || ((_c = item.otherProps) == null ? void 0 : _c.sender_id) === String(currentUserId) || item.author === "user" : item.author === "user"
              }
            ) }, item.id);
          }),
          /* @__PURE__ */ jsx(
            Modal,
            {
              className: "test-modal add_members_modal",
              footerOptions: /* @__PURE__ */ jsx("div", { children: "Footer Options" }),
              loading: showAddMembersLoading,
              open: showAddMembers,
              primaryButtonLabel: showAddMembersLoading ? "Adding..." : "Add",
              primaryButtonProps: {
                disabled: !addMembers.length > 0 || showAddMembersLoading
              },
              secondaryButtonLabel: "Cancel",
              size: "small",
              title: "Add members",
              onClose: () => {
                setShowAddMembers(false);
              },
              onPrimaryButtonClick: saveMembersInChat,
              onSecondaryButtonClick: () => {
                setShowAddMembers(false);
              },
              children: /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
                /* @__PURE__ */ jsx("div", { className: "modal-header-search-input-container", children: /* @__PURE__ */ jsx(
                  Input,
                  {
                    className: "modal-header-search-input",
                    leftIcon: /* @__PURE__ */ jsx("img", { alt: "search", className: "menu-header-search-icon", src: SearchIcon }),
                    placeholder: "Search members...",
                    value: memberSearchQuery,
                    onChange: (e) => {
                      handleMemberSearch(e.target.value);
                    }
                  }
                ) }),
                memberList.length > 0 ? filteredMemberList.length > 0 ? /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: filteredMemberList.map((user, index) => /* @__PURE__ */ jsxs(
                  "li",
                  {
                    style: {
                      display: "flex",
                      alignItems: "center",
                      gap: "10px",
                      marginBottom: "8px"
                      //
                    },
                    children: [
                      /* @__PURE__ */ jsx(
                        Checkbox,
                        {
                          defaultChecked: true,
                          checked: addMembers.includes(user.value),
                          variant: "default",
                          onChange: () => {
                            addInChat(user.value);
                          }
                        }
                      ),
                      /* @__PURE__ */ jsx(
                        Avatar,
                        {
                          label: user.label,
                          size: "small",
                          src: "static/media/avatar_sample.b13b667a.jpeg",
                          type: "withoutPicture"
                        }
                      ),
                      /* @__PURE__ */ jsx("span", { children: user.label })
                    ]
                  },
                  user.id || index
                )) }) : /* @__PURE__ */ jsxs(
                  "div",
                  {
                    style: {
                      textAlign: "center",
                      padding: "20px",
                      color: "#666",
                      fontSize: "14px"
                    },
                    children: [
                      'No members found for "',
                      memberSearchQuery,
                      '"'
                    ]
                  }
                ) : "Loading..."
              ] }, ".0")
            }
          ),
          infiniteScrollError && /* @__PURE__ */ jsxs("div", { className: "infinite-scroll-error", children: [
            /* @__PURE__ */ jsx("p", { children: "Failed to load older messages. Please try again." }),
            /* @__PURE__ */ jsx(
              Button,
              {
                size: "small",
                variant: "text",
                onClick: () => {
                  window.location.reload();
                },
                children: "Retry"
              }
            )
          ] })
        ]
      }
    ),
    chatId ? /* @__PURE__ */ jsx(
      ChatInput,
      {
        chatId,
        editingMessage,
        isEditMode,
        maxLength,
        messageConfig,
        placeholder,
        quickActionLabel: (_a = inputChatConfig.inputConfig) == null ? void 0 : _a.quickActionLabel,
        showFormatting,
        showQuickAction: (_b = inputChatConfig.inputConfig) == null ? void 0 : _b.showQuickAction,
        value: inputValue,
        onAttach: onAttachFile,
        onCancelEdit: exitEditMode,
        onChange: setInputValue,
        onEmojiClick,
        onImageUpload,
        onSend: handleSend
      }
    ) : null,
    /* @__PURE__ */ jsx(
      Prompt,
      {
        handleClose: () => {
          setShowClearChat(false);
        },
        isOpen: showClearChat,
        primaryButtonLabel: isClearChatLoading ? "Clearing..." : "Clear",
        secondaryButtonLabel: "Cancel",
        title: "Are you sure ?",
        variant: "error",
        onPrimaryButtonClick: handleAllMessagesDelete,
        onSecondaryButtonClick: () => {
          setShowClearChat(false);
        },
        children: "This will permanently delete all messages in this conversation."
      }
    )
  ] });
};
export {
  TableChatRightSection as default
};
