import { Card, Textarea } from "@mantine/core";
import { useState } from "react";
import { useTRPC } from "../../trpc/client";

export default function ChatPage() {
  const [inputMessage, setInputMessage] = useState("");
  const [loading, setLoading] = useState(false);
  const [outputMessage, setOutputMessage] = useState("");
  const trpc = useTRPC();

  async function handleSendMessage() {
    setLoading(true);
    const response = await trpc.chat.streamMessage.subscribe(
      {
        message: inputMessage,
      },
      {}
    );
    for await (const chunk of response) {
      setOutputMessage(chunk);
    }
    setLoading(false);
  }
  return (
    <div>
      <Card>{outputMessage}</Card>
      <Textarea
        resize="vertical"
        placeholder="Type your message here..."
        value={inputMessage}
        disabled={loading}
        onChange={(e) => setInputMessage(e.target.value)}
        onKeyDown={async (e) => {
          if (e.key === "Enter") {
            e.preventDefault();
          }
        }}
      />
    </div>
  );
}