import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { downloadDocument } from "../services/agentService";
async function fetchMediaUrl(itemId) {
    try {
        const response = await fetch(`/parhelia/agent/GetMediaUrl?itemId=${encodeURIComponent(itemId)}`);
        if (!response.ok)
            return null;
        return await response.json();
    }
    catch (error) {
        console.error('Failed to fetch media URL:', itemId, error);
        return null;
    }
}
async function fetchAgentDocumentImage(itemId, label) {
    try {
        const blob = await downloadDocument(itemId);
        if (!blob.type.toLowerCase().startsWith("image/")) {
            return null;
        }
        const url = URL.createObjectURL(blob);
        return {
            url,
            alt: label || "Uploaded image",
            revokeUrl: () => URL.revokeObjectURL(url),
        };
    }
    catch (error) {
        console.error("Failed to fetch agent document image:", itemId, error);
        return null;
    }
}
export function MediaImage({ itemId, label }) {
    const [mediaData, setMediaData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);
    useEffect(() => {
        let mounted = true;
        let revokeUrl;
        const loadImage = async () => {
            const mediaItem = await fetchMediaUrl(itemId);
            const data = mediaItem ?? await fetchAgentDocumentImage(itemId, label);
            if (!mounted) {
                data?.revokeUrl?.();
                return;
            }
            revokeUrl = data?.revokeUrl;
            setMediaData(data || null);
            setError(!data);
            setLoading(false);
        };
        setLoading(true);
        setError(false);
        setMediaData(null);
        loadImage();
        return () => {
            mounted = false;
            revokeUrl?.();
        };
    }, [itemId, label]);
    if (loading) {
        return (_jsxs("div", { className: "flex flex-col gap-1", children: [label && _jsx("div", { className: "text-xs font-medium text-gray-700", children: label }), _jsx("div", { className: "flex items-center justify-center h-32 bg-gray-100 rounded-lg border border-gray-200", children: _jsx("div", { className: "text-xs text-gray-500", children: "Loading image..." }) })] }));
    }
    if (error || !mediaData) {
        return (_jsxs("div", { className: "flex flex-col gap-1", children: [label && _jsx("div", { className: "text-xs font-medium text-gray-700", children: label }), _jsx("div", { className: "flex items-center justify-center h-32 bg-red-50 rounded-lg border border-red-200", children: _jsx("div", { className: "text-xs text-red-500", children: "Failed to load image" }) })] }));
    }
    return (_jsxs("div", { className: "flex flex-col gap-1", children: [label && _jsx("div", { className: "text-xs font-medium text-gray-700", children: label }), _jsx("img", { src: mediaData.url, alt: mediaData.alt || label || "Media item", className: "max-w-full h-auto rounded-lg border border-gray-200", loading: "lazy" }), mediaData.caption && (_jsx("div", { className: "text-xs text-gray-500 italic", children: mediaData.caption }))] }));
}
//# sourceMappingURL=MediaImage.js.map