'use client'
import React, { experimental_useOptimistic as useOptimistic, useTransition } from "react";
import { Conversation, Message } from "@/app/actions/conversations";
import { MessageList } from "./MessageList";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { AiOutlineSend } from "react-icons/ai";

export default function Chat({
    conversation,
    sendMessage,
}: {
    conversation: Conversation;
    sendMessage: (message: Message) => Promise<void>;
}) {
  const [disabled, startTransition] = useTransition();

  const [optimisticMessages, addOptimisticMessage] = useOptimistic<Message[], Message>(
    conversation.messages || [],
    (state, newMsg) => [...state, newMsg],
  );

  async function formAction(formData: FormData) {
      const newMsg: Message = {
        user_message: formData.get("user_message") as string,
        llm_response: "...",
      };
      startTransition(async () => {
        await sendMessage(newMsg)
      })
    }

    return (
        <div className="items-center gap-5 w-full h-full flex flex-col px-14 pb-5">
        {conversation.messages.length == 0 && (
          <div className="bg-gradient-to-r from-[#FEA326] to-[#C40317] text-transparent bg-clip-text text-[50px] m-auto text-center w-[200px]">
            Millie
          </div>
        )}
        <div className="overflow-auto w-full h-full">
          <MessageList messages={conversation.messages} />
        </div>
        <form 
            action={formAction}
            className="flex w-full items-center space-x-2">
          <Input name="user_message" type="text" placeholder="Send a request" />
          <Button disabled={disabled} type="submit"><AiOutlineSend/></Button>
        </form>
      </div>
    );
}