import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { Ban } from "lucide-react";
function formatRelativeTime(dateString, now) {
    const date = new Date(dateString);
    const diffMs = now.getTime() - date.getTime();
    // Should never happen if server uses UTC consistently, but fallback just in case
    if (diffMs < 0)
        return "just now";
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);
    if (diffMins < 1)
        return "just now";
    if (diffMins < 60)
        return `${diffMins}m ago`;
    if (diffHours < 24)
        return `${diffHours}h ago`;
    if (diffDays < 7)
        return `${diffDays}d ago`;
    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}
export const ItemList = ({ items, onItemHover, onItemClick, maxItems = 6, className = "", showPath = true, }) => {
    // Track current time for relative time calculations
    // Initialize to null to avoid hydration mismatch, then set after mount
    const [currentTime, setCurrentTime] = useState(null);
    useEffect(() => {
        // Set initial time after mount
        setCurrentTime(new Date());
        // Update every 30 seconds
        const interval = setInterval(() => setCurrentTime(new Date()), 30000);
        return () => clearInterval(interval);
    }, []);
    const filteredItems = items.filter((x) => x.language).slice(0, maxItems);
    const handleItemClick = (item) => {
        onItemClick({
            id: item.id,
            language: item.language,
            version: 0,
            path: item.path,
            icon: item.icon,
            idPath: item.idPath,
        });
    };
    if (filteredItems.length === 0) {
        return null;
    }
    return (_jsx("div", { className: `flex flex-1 flex-col gap-1 overflow-y-auto ${className}`, "data-testid": "item-list", children: filteredItems.map((item) => {
            const isDeleted = !item.icon;
            return (_jsxs("div", { className: `flex cursor-pointer items-start gap-2 rounded p-1 text-xs hover:bg-gray-50 ${isDeleted ? "opacity-60" : ""}`, "data-testid": "item-list-entry", "data-item-id": item.id, "data-item-name": item.name, onMouseEnter: () => onItemHover?.(item), onMouseLeave: () => onItemHover?.(undefined), onClick: () => handleItemClick(item), children: [item.icon ? (_jsx("img", { src: item.icon, width: "16", height: "16", className: "mt-0.5 flex-shrink-0" })) : (_jsx(Ban, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-gray-400", strokeWidth: 1.5 })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: `truncate font-medium ${isDeleted ? "text-gray-500" : "text-gray-900"}`, children: [item.displayName || item.name, _jsxs("span", { className: "text-2xs ml-1 text-gray-400", children: ["(", item.language, ")"] })] }), item.visitedAt && currentTime && (_jsx("span", { className: "text-2xs shrink-0 text-gray-400", children: formatRelativeTime(item.visitedAt, currentTime) }))] }), showPath && (_jsx("div", { className: "text-2xs break-words text-gray-500", children: item.path }))] })] }, item.id + item.language));
        }) }));
};
//# sourceMappingURL=ItemList.js.map