import { Send, X } from "lucide-react";
import React, { Dispatch, SetStateAction } from "react";
import { ChatCompletionMessageParam } from "openai/resources/index";
import Row from "../../layout/Row";
import Button from "../../layout/Button";
import CopySlug from "../CopySlug";
import AIPromptHistoryModal from "./AIPromptHistoryModal";

type Props = {
    streamRes: string;
    setStreamRes: Dispatch<SetStateAction<string>>;
    setPrompt: Dispatch<SetStateAction<string>>;
    loading: boolean;
    promptFn: (prompt: string) => void;
    history: ChatCompletionMessageParam[];
    prompt: string;
    currentPromptRef: React.MutableRefObject<string>;
    promptInputRef: React.RefObject<HTMLTextAreaElement>;
};

export default function AIPromptActionSection({
    streamRes,
    setStreamRes,
    loading,
    promptFn,
    history,
    prompt,
    setPrompt,
    currentPromptRef,
    promptInputRef,
}: Props) {
    return (
        <Row className="w-full justify-between">
            <Row className="gap-4">
                {streamRes.match(/./) && (
                    <React.Fragment>
                        <Button
                            title="Clear AI Result"
                            variant="ghost"
                            size="smaller"
                            color="gray"
                            className="px-0"
                            beforeIcon={<X size={20} />}
                            onClick={() => {
                                setStreamRes("");
                            }}
                        />
                        <CopySlug
                            slugText={streamRes}
                            justIcon
                            iconProps={{ size: 18 }}
                            title="Copy Content"
                        />
                    </React.Fragment>
                )}
            </Row>
            <Row>
                <AIPromptHistoryModal history={history} />
            </Row>
            <Row>
                <Button
                    title="Send Prompt"
                    beforeIcon={<Send size={20} />}
                    loading={loading}
                    className="p-2"
                    onClick={() => {
                        currentPromptRef.current = prompt;
                        setTimeout(() => {
                            setPrompt("");
                            if (promptInputRef.current) {
                                promptInputRef.current.value = "";
                            }
                        }, 200);
                        promptFn(prompt);
                    }}
                    loadingProps={{ size: "smaller" }}
                />
            </Row>
        </Row>
    );
}