"use client";

import { Conversation } from "@/types/conversations";
import { Skeleton } from "./ui/skeleton";
import { useBrokenFile, useSyncMedia } from "@/hooks/useWhatsApp";
import { RefreshCcw } from "lucide-react";
import { Button } from "./ui/button";


interface MessageItemAudioProps {
    conversation: Conversation;
}

const MessageItemAudio = ({ conversation }: MessageItemAudioProps) => {
    const { refetch, isFetching, data } = useSyncMedia(conversation.id.toString());
    const { isFetching:isFetchingBroken, data:isBroken } = useBrokenFile(conversation.media_file_path ?? '');
    return (
        <div className="flex flex-col gap-2">
            {
                    (!isFetching && !isFetchingBroken) ?
                        (isBroken || typeof isBroken === "undefined") ? 
                            <Button disabled={isFetching} onClick={(e) => {
                                refetch();
                            }}>
                                <RefreshCcw className={`${isFetching ? 'animate-spin' : ''}`}/>
                                Reload
                            </Button>
                        :
                        <audio controls>
                            <source src={conversation.media_url || ""} type="audio/mpeg" />
                        </audio>
                    :
                    <Skeleton className="h-[200px] w-[350px] rounded-xl" />
                }
            <span className="border-t border-gray-200 dark:border-gray-700"></span>
            <p className="text-sm text-gray-800 dark:text-white pb-4">{conversation.message_text}</p>
        </div>
    );
};

export default MessageItemAudio;