import { ChatCompletionMessageParam } from "openai/resources/index";
import React from "react";
import Paper from "../Paper";
import Stack from "../../layout/Stack";
import AIPromptPreview from "./AIPromptPreview";
import LoadingOverlay from "../LoadingOverlay";
import Textarea from "../../form/Textarea";
import AIPromptActionSection from "./AIPromptActionSection";
import Card from "../Card";
import Row from "../../layout/Row";
import Span from "../../layout/Span";
import { MessageCircleMore } from "lucide-react";

type Props = {
    model?: string;
    promptFn: (prompt: string) => void;
    history?: ChatCompletionMessageParam[];
    loading?: boolean;
    mdRes?: string;
    setMdRes: React.Dispatch<React.SetStateAction<string>>;
};

export default function AIPromptBlock({
    model,
    promptFn,
    history = [],
    loading = false,
    mdRes = "",
    setMdRes,
}: Props) {
    const [prompt, setPrompt] = React.useState("");
    const currentPromptRef = React.useRef("");
    const promptInputRef = React.useRef<HTMLTextAreaElement>(null);

    return (
        <Paper className="">
            <Stack className="w-full">
                {currentPromptRef.current && (
                    <Row className="w-full justify-end">
                        <Card className="py-1.5 px-2.5 text-xs">
                            <Row>
                                <Span>{currentPromptRef.current}</Span>
                                <MessageCircleMore
                                    size={15}
                                    opacity={0.5}
                                    className="-mt-[1px]"
                                />
                            </Row>
                        </Card>
                    </Row>
                )}
                <AIPromptPreview
                    setStreamRes={setMdRes}
                    streamRes={mdRes}
                    history={history}
                />
                <Stack className="w-full relative">
                    {loading && <LoadingOverlay />}
                    <Textarea
                        placeholder={model ? `Prompt ${model}` : "Prompt AI"}
                        wrapperProps={{ className: "outline-none" }}
                        wrapperWrapperProps={{ className: "w-full" }}
                        value={prompt}
                        onChange={(e) => {
                            setPrompt(e.target.value);
                        }}
                        onKeyDown={(e) => {
                            if (e.key == "Enter" && !e.ctrlKey) {
                                e.preventDefault();
                                currentPromptRef.current = prompt;
                                setTimeout(() => {
                                    setPrompt("");
                                    if (promptInputRef.current) {
                                        promptInputRef.current.value = "";
                                    }
                                }, 200);
                                promptFn(prompt);
                            }
                        }}
                        componentRef={promptInputRef}
                        autoFocus
                    />
                    <AIPromptActionSection
                        loading={loading}
                        promptFn={promptFn}
                        setStreamRes={setMdRes}
                        streamRes={mdRes}
                        history={history}
                        prompt={prompt}
                        setPrompt={setPrompt}
                        currentPromptRef={currentPromptRef}
                        promptInputRef={promptInputRef as any}
                    />
                </Stack>
            </Stack>
        </Paper>
    );
}