import { JsonInput, Tabs, Textarea } from "@mantine/core";
import { useState } from "react";

const defaultSystemPrompt = `You are a helpful assistant that answers questions based on the provided context. If you don't know the answer, just say that you don't know, don't try to make up an answer.`;
const defaultParameters = {
  temperature: 0.5,
  max_tokens: 100,
};

export default function ChatPage() {
  const [prompt, setPrompt] = useState("");
  const [systemPrompt, setSystemPrompt] = useState(defaultSystemPrompt);
  const [parameters, setParameters] = useState(defaultParameters);

  return (
    <Tabs defaultValue="prompt">
      <Tabs.List>
        <Tabs.Tab value="prompt">Prompt</Tabs.Tab>
        <Tabs.Tab value="system-prompt">System Prompt</Tabs.Tab>
        <Tabs.Tab value="parameters">Parameters</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="prompt">
        <Textarea
          resize="vertical"
          placeholder="Type your message here..."
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              e.preventDefault();
              console.log("Sending message...");
            }
          }}
        />
      </Tabs.Panel>
      <Tabs.Panel value="system-prompt">
        <Textarea
          resize="vertical"
          placeholder={defaultSystemPrompt}
          value={systemPrompt}
          onChange={(e) => setSystemPrompt(e.target.value)}
        />
      </Tabs.Panel>
      <Tabs.Panel value="parameters">
        <JsonInput
          resize="vertical"
          formatOnBlur
          placeholder={JSON.stringify(defaultParameters)}
          value={JSON.stringify(parameters)}
          onChange={(value) => setParameters(JSON.parse(value))}
        />
      </Tabs.Panel>
    </Tabs>
  );
}