"use client"
import {
  ChatInput,
  ChatInputSubmit,
  ChatInputTextArea
} from "@/components/ui/chat-input"
import {
  ChatMessage,
  ChatMessageAvatar,
  ChatMessageContent
} from "@/components/ui/chat-message"
import { ChatMessageArea } from "@/components/ui/chat-message-area"
import { useChat } from "ai/react"

export function Chat({ className,thread_id,initialMessages, ...props }) {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading,
    stop
  } = useChat({
    id: thread_id,
    api: "/api/chat",
    sendExtraMessageFields: true,
    experimental_prepareRequestBody({ messages, id, requestData  }) {
      console.log(requestData);
      
      return { message: messages[messages.length - 1].content, thread_id, approveObj:requestData };
    },
    initialMessages: initialMessages,
    onFinish: message => {
      console.log("onFinish", message, completion);
    },
    onToolCall: tool => console.log(tool)
  })
  console.log("messages",messages);
  
  const handleSubmitMessage = () => {
    if (isLoading) {
      return
    }
    handleSubmit()
  }

  return (
    <div className="flex-1 flex flex-col h-full overflow-y-auto" {...props}>
      <ChatMessageArea scrollButtonAlignment="center">
        <div className="max-w-2xl mx-auto w-full px-4 py-8 space-y-4 text-white">
          {messages.map(message => {

            
            if (message.role !== "user") {
              return (
                <ChatMessage key={message.id} id={message.id}>
                  <ChatMessageAvatar />
                  <ChatMessageContent content={message.content} toolInvocations={message.toolInvocations} interruptSubmitter={handleSubmit}/>
                </ChatMessage>
              )
            }
            if (!message.content) return null; 

            return (
              <ChatMessage
                key={message.id}
                id={message.id}
                variant="bubble"
                type="outgoing"
              >
                <ChatMessageContent content={message.content} />
              </ChatMessage>
            )
          })}
        </div>
      </ChatMessageArea>
      <div className="px-2 py-4 max-w-2xl mx-auto w-full">
        <ChatInput
          value={input}
          onChange={handleInputChange}
          onSubmit={handleSubmitMessage}
          loading={isLoading}
          onStop={stop}
        >
          <ChatInputTextArea placeholder="Type a message..." />
          <ChatInputSubmit />
        </ChatInput>
      </div>
    </div>
  )
}