import type { UserTablo } from "@xtablo/shared/types/tablos.types";
import { useEffect } from "react";
import { ChatMessages } from "./ChatMessages";
import { useChat } from "./hooks/useChat";

interface Member {
  id: string;
  name: string;
  avatar_url: string | null;
}

interface TabloDiscussionSectionProps {
  tablo: UserTablo;
  isAdmin: boolean;
  currentUserId: string;
  members?: Member[];
}

export const TabloDiscussionSection = ({
  tablo,
  currentUserId,
  members = [],
}: TabloDiscussionSectionProps) => {
  const {
    messages,
    sendMessage,
    sendTyping,
    typingUsers,
    loadMoreMessages,
    hasMoreMessages,
    markAsRead,
  } = useChat(tablo.id);

  // Mark as read when opening the discussion
  useEffect(() => {
    if (messages.length > 0) {
      markAsRead();
    }
  }, [messages.length, markAsRead]);

  return (
    <div className="flex flex-col h-full overflow-hidden">
      <div className="flex-1 overflow-hidden min-h-0">
        <ChatMessages
          messages={messages}
          currentUserId={currentUserId}
          members={members}
          typingUsers={typingUsers}
          hasMoreMessages={hasMoreMessages}
          onLoadMore={loadMoreMessages}
          onSend={sendMessage}
          onTyping={sendTyping}
        />
      </div>
    </div>
  );
};
