import { useEffect, useRef } from "react";

import ChatActions from "@/app/components/ui/chat/chat-actions";
import ChatMessage from "@/app/components/ui/chat/chat-message";
import { ChatHandler } from "@/app/components/ui/chat/chat.interface";

export default function ChatMessages(
  props: Pick<ChatHandler, "messages" | "isLoading" | "reload" | "stop">,
) {
  const scrollableChatContainerRef = useRef<HTMLDivElement>(null);
  const messageLength = props.messages.length;
  const lastMessage = props.messages[messageLength - 1];

  const scrollToBottom = () => {
    if (scrollableChatContainerRef.current) {
      scrollableChatContainerRef.current.scrollTop =
        scrollableChatContainerRef.current.scrollHeight;
    }
  };

  const isLastMessageFromAssistant =
    messageLength > 0 && lastMessage?.role !== "user";
  const showReload =
    props.reload && !props.isLoading && isLastMessageFromAssistant;
  const showStop = props.stop && props.isLoading;

  useEffect(() => {
    scrollToBottom();
  }, [messageLength, lastMessage]);

  return (
    messageLength > 0 && (
      <div className="w-full rounded-xl bg-white dark:bg-zinc-700/30 dark:from-inherit p-4 shadow-xl pb-0">
        <div
          className="flex h-[50vh] flex-col gap-5 divide-y overflow-y-auto pb-4"
          ref={scrollableChatContainerRef}
        >
          {props.messages.map((m) => (
            <ChatMessage key={m.id} {...m} />
          ))}
        </div>
        <div className="flex justify-end py-4">
          <ChatActions
            reload={props.reload}
            stop={props.stop}
            showReload={showReload}
            showStop={showStop}
          />
        </div>
      </div>
    )
  );
}