import Message from "./components/Message/Message.tsx";
import { useChatContext } from "../../pages/ClientsPage/contexts/ChatContext.tsx";
import { MessageSchema } from "../../client";
import { ReactNode, useCallback } from "react";
import ChatDate from "./components/ChatDate/ChatDate.tsx";
import MessageInput from "./components/MessageInput/MessageInput.tsx";
import { Virtuoso } from "react-virtuoso";
import { Stack } from "@mantine/core";

const Chat = () => {
    const {
        messages,
        lastMessage,
        firstItemIndex,
        fetchMoreMessages,
    } = useChatContext();

    const onFollowOutputHandler = useCallback(
        (atBottom: boolean) => {
            if (atBottom || lastMessage?.crmSender) {
                return "auto";
            } else {
                return false;
            }
        },
        [lastMessage],
    );

    const itemContent = useCallback(
        (index: number, sessionData: MessageSchema) => {
            let dateComponent: ReactNode | null = null;
            const msgArrayIdx = index - firstItemIndex;
            const currMessage = messages[msgArrayIdx];
            let prevMessage = null;
            if (msgArrayIdx > 0) {
                prevMessage = messages[msgArrayIdx - 1];
            }
            if (!prevMessage || prevMessage.createdAt.substring(5, 10) != currMessage.createdAt.substring(5, 10)) {
                dateComponent = (
                    <ChatDate
                        key={currMessage.id + "date"}
                        date={new Date(currMessage.createdAt)}
                    />
                );
            }
            return (
                <Stack mb={"xs"} mr={"xs"}>
                    {dateComponent}
                    <Message
                        key={`${sessionData.id}${index}`}
                        message={sessionData}
                    />
                </Stack>
            );
        },
        [messages],
    );

    if (messages.length === 0) {
        return (
            <Stack h={"96vh"} justify={"flex-end"}>
                <MessageInput />
            </Stack>
        );
    }
    
    return (
        <Stack h={"96vh"}>
            <Virtuoso
                data={messages}
                followOutput={onFollowOutputHandler}
                firstItemIndex={firstItemIndex}
                initialTopMostItemIndex={messages.length - 1}
                itemContent={itemContent}
                startReached={fetchMoreMessages}
                height={"100%"}
                increaseViewportBy={100}
                alignToBottom
            />
            <MessageInput />
        </Stack>
    );
};

export default Chat;