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

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

export default function AIPromptActionSection({
    streamRes,
    setStreamRes,
    loading,
    promptFn,
    history,
    prompt,
    setPrompt,
    currentPromptRef,
    promptInputRef,
    user_image_url,
    transcribing,
    voice_transcription_fn,
    last_response,
    cancel_voice_transcription_fn,
}: Props) {
    return (
        <Row className="w-full justify-between">
            <Row className="gap-4 px-2">
                <AIVoiceTranscription
                    transcribing={transcribing}
                    voice_transcription_fn={voice_transcription_fn}
                    cancel_voice_transcription_fn={
                        cancel_voice_transcription_fn
                    }
                    history={history}
                    last_response={last_response}
                />
                {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>
                )}

                <AIPromptHistoryModal
                    history={history}
                    user_image_url={user_image_url}
                />
            </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" }}
                    disabled={transcribing}
                />
            </Row>
        </Row>
    );
}