"use client";

import { Conversation } from "@/types/conversations";
import { FileText, RefreshCcw } from "lucide-react";
import Link from "next/link";
import { Icon } from "@iconify/react";
import { dashToPoint, nl2br, parseMessage } from "@/lib/utils";
import { useBrokenFile, useSyncMedia } from "@/hooks/useWhatsApp";
import { useEffect, useState } from "react";
import { Skeleton } from "./ui/skeleton";
import { Button } from "./ui/button";

interface MessageItemAudioProps {
    conversation: Conversation;
}

const MessageItemDocument = ({ conversation }: MessageItemAudioProps) => {
    const { refetch, isFetching, data } = useSyncMedia(conversation.id.toString());
    const { isFetching:isFetchingBroken, data:isBroken } = useBrokenFile(conversation.media_file_path ?? '');

    const urlRegex = /(https?:\/\/[^\s]+)/g;
    const parts = dashToPoint(conversation.message_text).split(urlRegex);
    
    return (
        <div className="flex flex-col gap-2">
            {
                 (!isFetching && !isFetchingBroken) ?
                    <div className="flex flex-row gap-1 bg-zinc-400/25 dark:bg-[#111b21] p-3 rounded-lg">
                        {
                             (isBroken || typeof isBroken === "undefined") ? (
                                <Button disabled={isFetching} className="w-full" onClick={(e) => {
                                    refetch();
                                }}>
                                    <RefreshCcw className={`${isFetching ? 'animate-spin' : ''}`}/>
                                    Reload
                                </Button>
                            ) : (
                                <Link href={conversation.media_url || "#"} target="_blank" className="flex flex-row gap-1">
                                    <div className="flex flex-row gap-1">
                                        {conversation.media_mime_type == "application/pdf" ?
                                            <Icon icon="vscode-icons:file-type-pdf2" className="text-red-600 h-10 w-10"/>
                                            :
                                            (conversation.media_mime_type == "application/msword" || conversation.media_mime_type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") ?
                                                <Icon icon="vscode-icons:file-type-word" className="text-green-600 h-10 w-10"/>
                                            :
                                            (conversation.media_mime_type == "application/vnd.ms-excel" || conversation.media_mime_type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")  ?
                                                <Icon icon="vscode-icons:file-type-excel" className="text-green-600 h-10 w-10"/>
                                            :
                                            <FileText/>
                                        }
                                        <span className="text-gray-600 dark:text-gray-200 text-sm">{conversation?.media_file_name}</span>
                                    </div>
                                </Link>
                            )
                        }
                    
                </div>
                :
                <Skeleton className="h-[50px] w-[350px] rounded-xl" />
            }
           
           <span className="text-sm text-gray-800 dark:text-white pb-1" dangerouslySetInnerHTML={{__html:nl2br(parseMessage(conversation.message_text))  || ""}}/>
        </div>
    );
};

export default MessageItemDocument;