"use client";

import type { ChatsChatid } from "~/schemas/public/Chats";
import ChatBottombar from "~/components/chat/chat-bottombar";
import { ChatList } from "~/components/chat/chat-list";
import ChatTopbar from "~/components/chat/chat-topbar";
import { useLiveChat } from "~/hooks/chatHooks";
import { api } from "~/utils/api";
import type { Session } from "~/server/api/trpc";
import { memo } from "react";

const Chat = memo(
  ({ chatId, userData }: { chatId: ChatsChatid; userData: Session }) => {
    const liveChat = useLiveChat(chatId, userData);
    const [userinfo] = api.chat.getUserInfosByChat.useSuspenseQuery({
      chatId,
    });

    return (
      <div className="flex h-full w-full flex-col justify-between">
        <div className="shrink-0">
          <ChatTopbar
            chatId={chatId}
            userData={userData}
            chatUserData={userinfo}
            onlineStatus={liveChat.onlineUsers}
          />
        </div>
        <ChatList
          chatId={chatId}
          userData={userData}
          messages={liveChat.messages}
          query={liveChat.query}
          typingStatus={liveChat.typingStatus}
        />

        <div className="shrink-0 border-t">
          <ChatBottombar
            chatId={chatId}
            userData={userData}
            chatUserData={userinfo}
          />
        </div>
      </div>
    );
  },
  (prevProps, nextProps) =>
    prevProps.chatId === nextProps.chatId &&
    prevProps.userData.id === nextProps.userData.id,
);
Chat.displayName = "Chat";

export default Chat;