import { Speech, Voicemail, X } from "lucide-react";
import Button from "../../layout/Button";
import { ChatCompletionMessageParam } from "openai/resources";
import Row from "../../layout/Row";
import Loading from "../Loading";
import Border from "../Border";

type Props = {
    voice_transcription_fn?: (params: { last_message?: string }) => void;
    transcribing?: boolean;
    history?: ChatCompletionMessageParam[];
    last_response?: string;
    cancel_voice_transcription_fn?: () => void;
};

export default function AIVoiceTranscription({
    transcribing,
    voice_transcription_fn,
    history,
    last_response,
    cancel_voice_transcription_fn,
}: Props) {
    if (!voice_transcription_fn) return null;

    if (transcribing) {
        return (
            <Border className="px-1.5! py-0.5!">
                <Row className="gap-2!">
                    <Loading size="small" />
                    <Button
                        title="Cancel Transcription"
                        className="p-1!"
                        onClick={(e) => {
                            e.preventDefault();
                            cancel_voice_transcription_fn?.();
                        }}
                        variant="ghost"
                    >
                        <X size={20} opacity={0.7} />
                    </Button>
                </Row>
            </Border>
        );
    }

    return (
        <Button
            title="Listen to Speech"
            size="smaller"
            color="gray"
            variant="ghost"
            loading={transcribing}
            onClick={(e) => {
                e.preventDefault();

                const history_last_response = history?.find(
                    (h) => h.role == "assistant",
                );
                voice_transcription_fn({
                    last_message:
                        last_response ||
                        history_last_response?.content?.toString(),
                });
            }}
            className="p-1!"
        >
            <Speech size={20} opacity={0.7} />
        </Button>
    );
}