import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { retrieveRendition } from '../../../utils';
import { Button, Card, CardContent, Separator, VTooltip } from "@vertesia/ui/core";
import { useUserSession } from "@vertesia/ui/session";
import { Eye } from 'lucide-react';
export function DocumentIconSkeleton({ isLoading = false, counts = 6 }) {
    if (!isLoading) {
        return null;
    }
    return (_jsx("div", { className: 'flex flex-wrap gap-2 justify-between', children: Array(counts).fill(0).map((_, index) => _jsx("div", { className: "w-[15vw] animate-pulse", children: _jsxs(Card, { className: "relative flex flex-col border h-fit", children: [_jsx("div", { className: "h-48 bg-muted rounded-t-xl flex items-center justify-center text-muted", children: "\u00A0" }), _jsx(Separator, { className: 'bg-muted h-[2px]' }), _jsxs(CardContent, { className: "p-2 flex flex-col", children: [_jsxs("div", { className: "flex flex-col overflow-hidden", children: [_jsx("div", { className: "h-5 bg-muted rounded w-3/4 mb-2" }), _jsx("div", { className: "h-4 bg-muted rounded w-1/2" })] }), _jsx("div", { className: "text-xs text-muted w-full flex justify-end mt-2", children: _jsx("div", { className: "h-3 bg-muted rounded w-1/4" }) })] })] }) }, index)) }));
}
export function DocumentIcon({ selection, document, onSelectionChange, onRowClick, previewObject, selectedObject }) {
    const { client } = useUserSession();
    const [renditionUrl, setRenditionUrl] = useState(undefined);
    const [renditionAlt, setRenditionAlt] = useState(undefined);
    const [renditionStatus, setRenditionStatus] = useState(undefined);
    const handleSelect = (ev) => {
        ev.stopPropagation();
        onSelectionChange(document, ev);
    };
    useEffect(() => {
        if (!document?.content) {
            return;
        }
        retrieveRendition(client, document, setRenditionUrl, setRenditionAlt, setRenditionStatus);
    }, [document]);
    return (_jsxs(Card, { className: `relative flex flex-col border h-fit ${selectedObject?.id === document.id ? 'border-attention border-4' : ''}`, onClick: () => (onRowClick && onRowClick(document)), children: [selection && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-col items-center gap-1", children: _jsx("input", { checked: selection.isSelected(document.id), type: "checkbox", onChange: handleSelect, onClick: (e) => e.stopPropagation() }) })), _jsx("div", { className: "absolute top-1 right-1 z-10 flex flex-col items-center", children: _jsx(Button, { variant: "ghost", size: "sm", title: "Preivew Object", onClick: (e) => {
                        e.stopPropagation();
                        previewObject?.(document.id);
                    }, children: _jsx(Eye, { className: `size-4 ${renditionStatus === 'ready' ? 'text-muted' : 'text-white'}` }) }) }), (renditionUrl && renditionStatus == 'ready') ? (_jsx("img", { src: renditionUrl, alt: renditionAlt, className: "w-auto h-48 object-cover rounded-t-xl" })) : (_jsx("div", { className: "h-48 bg-gray-700 rounded-t-xl flex items-center justify-center text-muted", children: renditionStatus })), _jsx(Separator, { className: 'bg-gray-200 h-[2px]' }), _jsxs(CardContent, { className: "p-2 flex flex-col", children: [_jsxs("div", { className: "flex flex-col overflow-hidden", children: [_jsx(VTooltip, { placement: 'top', description: document.properties?.title ?? document.name, children: _jsx("h3", { className: "text-start font-medium leading-none truncate", children: document.properties?.title ?? document.name }) }), document?.type?.name ? (_jsx(VTooltip, { placement: 'bottom', size: 'xs', description: document?.type?.name, children: _jsx("p", { className: "text-start text-xs text-muted truncate", children: document?.type?.name }) })) : _jsx("p", { className: "text-xs text-muted", children: "\u2002" })] }), document.score && (_jsxs("div", { className: "text-xs text-muted w-full flex justify-end", children: ["Score: ", (document.score).toFixed(4) ?? "-"] }))] })] }));
}
//# sourceMappingURL=DocumentIcon.js.map