import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, useRef, useMemo, useCallback, memo, } from "react";
import { cn } from "../../lib/utils";
import { Button } from "../../components/ui/button";
import { Grid3X3, Square, List, Upload, RefreshCw, Loader2, FileIcon, } from "lucide-react";
import { useEditContext } from "../client/editContext";
import { getChildren } from "../services/contentService";
import { toast } from "sonner";
import { FilterInput } from "../../components/FilterInput";
import { executeSearch } from "../services/searchService";
import { useDebouncedCallback } from "use-debounce";
import { Spinner } from "../ui/Spinner";
import { showItemContextMenu } from "../itemContextMenu";
const normalizeId = (id) => id?.toLowerCase() ?? "";
const MEDIA_FOLDER_TEMPLATE_ID = "fe5dd826-48c6-436d-b87a-7c4210c7413b";
const MEDIA_NODE_TEMPLATE_ID = "239f9cf4-e5a0-44e0-b342-0f32cd4c6d8b";
const isMediaFolderItem = (item) => [MEDIA_FOLDER_TEMPLATE_ID, MEDIA_NODE_TEMPLATE_ID].includes(normalizeId(item.templateId));
// Memoized thumbnail item component to prevent unnecessary re-renders
const ThumbnailItem = memo(({ thumbnail, isSelected, onClick, onContextMenu, viewMode, }) => {
    const hasImage = !!thumbnail.thumbUrl;
    const iconSrc = thumbnail.largeIcon || thumbnail.icon;
    if (viewMode === "list") {
        return (_jsxs("div", { className: cn(isSelected
                ? "border-feedback-blue bg-feedback-blue-light"
                : "hover:bg-neutral-grey-5 bg-white", "flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors duration-200"), onClick: onClick, onContextMenu: onContextMenu, children: [_jsx("div", { className: "bg-neutral-grey-5 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-md", children: hasImage ? (_jsx("img", { src: thumbnail.thumbUrl, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80", style: { width: "32px", height: "32px" } })) : (_jsx(FileIcon, { className: "text-neutral-grey-50 h-8 w-8" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-neutral-grey-100 truncate text-xs font-medium", children: thumbnail.name }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs", children: isMediaFolderItem(thumbnail) ? "Folder" : "Media File" })] })] }));
    }
    const isLarge = viewMode === "large-grid";
    const gridSrc = isLarge ? thumbnail.previewUrl : thumbnail.thumbUrl;
    return (_jsxs("div", { className: cn(isSelected
            ? "ring-feedback-blue shadow-lg ring-2"
            : "shadow-sm hover:shadow-md", "cursor-pointer overflow-hidden rounded-lg bg-white transition-all duration-200 hover:scale-105"), onClick: onClick, onContextMenu: onContextMenu, children: [_jsx("div", { className: "bg-neutral-grey-5 flex aspect-square items-center justify-center", children: gridSrc ? (_jsx("img", { src: gridSrc, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80", style: { width: "32px", height: "32px" } })) : (_jsx(FileIcon, { className: cn("text-neutral-grey-50", isLarge ? "h-20 w-20" : "h-12 w-12") })) }), _jsx("div", { className: isLarge ? "p-3" : "p-2", children: _jsx("div", { className: cn("text-neutral-grey-100 line-clamp-2 break-all", isLarge ? "text-sm font-medium" : "text-xs font-medium"), children: thumbnail.name }) })] }));
});
ThumbnailItem.displayName = "ThumbnailItem";
export function MediaFolderBrowser({ folderId, language = "en", }) {
    const [viewMode, setViewMode] = useState("grid");
    const [currentFolderId, setCurrentFolderId] = useState(folderId);
    const [images, setImages] = useState([]);
    const imagesRef = useRef(images);
    const [selectedImage, setSelectedImage] = useState();
    const [selectedImageIds, setSelectedImageIds] = useState([]);
    const selectedImageRef = useRef(selectedImage);
    const lastSelectedImageId = useRef(undefined);
    const [loading, setLoading] = useState(false);
    const [uploading, setUploading] = useState(false);
    const [isDragOver, setIsDragOver] = useState(false);
    const dragDepthRef = useRef(0);
    const activeLoadKeyRef = useRef(undefined);
    const lastLoadedKeyRef = useRef(undefined);
    const [searchQuery, setSearchQuery] = useState("");
    const searchQueryRef = useRef(searchQuery);
    const [searchResults, setSearchResults] = useState([]);
    const [searching, setSearching] = useState(false);
    const editContext = useEditContext();
    const sessionId = editContext?.sessionId;
    useEffect(() => {
        setCurrentFolderId(folderId);
        setSelectedImage(undefined);
        selectedImageRef.current = undefined;
        setSelectedImageIds([]);
        lastSelectedImageId.current = undefined;
        setSearchQuery("");
        setSearchResults([]);
    }, [folderId]);
    useEffect(() => {
        imagesRef.current = images;
    }, [images]);
    useEffect(() => {
        searchQueryRef.current = searchQuery;
    }, [searchQuery]);
    // Keep ref in sync with state
    useEffect(() => {
        selectedImageRef.current = selectedImage;
        if (!selectedImage)
            return;
        setSelectedImageIds((ids) => (ids.length === 0 ? [selectedImage.id] : ids));
        lastSelectedImageId.current ??= selectedImage.id;
    }, [selectedImage]);
    const loadMediaFiles = useCallback(async (force = false) => {
        if (!sessionId || !currentFolderId)
            return;
        const loadKey = `${sessionId}:${currentFolderId}:${language}`;
        if (!force &&
            (activeLoadKeyRef.current === loadKey ||
                lastLoadedKeyRef.current === loadKey)) {
            return;
        }
        activeLoadKeyRef.current = loadKey;
        setLoading(true);
        try {
            const children = await getChildren(currentFolderId, sessionId, [], false, language);
            if (activeLoadKeyRef.current !== loadKey)
                return;
            setImages(children || []);
            lastLoadedKeyRef.current = loadKey;
        }
        catch (error) {
            console.error("Error loading media files:", error);
            if (activeLoadKeyRef.current !== loadKey)
                return;
            setImages([]);
        }
        finally {
            if (activeLoadKeyRef.current === loadKey) {
                activeLoadKeyRef.current = undefined;
                setLoading(false);
            }
        }
    }, [currentFolderId, language, sessionId]);
    useEffect(() => {
        void loadMediaFiles();
    }, [loadMediaFiles]);
    const handleSearch = useDebouncedCallback(async (query) => {
        if (!editContext || !currentFolderId || !query.trim()) {
            setSearchResults([]);
            setSearching(false);
            return;
        }
        setSearching(true);
        try {
            const result = await executeSearch({
                index: "master",
                query: query.trim(),
                editContext,
                rootItemIds: [currentFolderId],
                maxResults: 50,
            });
            if (result.type === "success") {
                // Transform search results to Thumbnail format
                // No template filtering needed since search is scoped to media folder
                const thumbnails = result.data.map((item) => ({
                    id: item.id,
                    name: item.name,
                    thumbUrl: item.thumbUrl || "",
                    previewUrl: item.previewUrl || item.thumbUrl || "",
                    icon: item.icon || "",
                    largeIcon: item.largeIcon || "",
                    templateId: item.templateId,
                    hasChildren: item.hasChildren,
                    language: item.language,
                    version: item.version,
                }));
                setSearchResults(thumbnails);
            }
            else {
                setSearchResults([]);
                toast.error("Search failed. Please try again.");
            }
        }
        catch (error) {
            console.error("Error searching media files:", error);
            setSearchResults([]);
            toast.error("Error searching media files");
        }
        finally {
            setSearching(false);
        }
    }, 600);
    useEffect(() => {
        if (searchQuery.trim()) {
            handleSearch(searchQuery);
        }
        else {
            setSearchResults([]);
        }
    }, [handleSearch, searchQuery]);
    const refreshVisibleMedia = useCallback(() => {
        const currentSearchQuery = searchQueryRef.current.trim();
        if (currentSearchQuery) {
            handleSearch(currentSearchQuery);
            return;
        }
        void loadMediaFiles(true);
    }, [handleSearch, loadMediaFiles]);
    useEffect(() => {
        if (!editContext?.itemsRepository || !currentFolderId)
            return;
        const unsubscribe = editContext.itemsRepository.subscribeItemsChanged((changes) => {
            const normalizedCurrentFolderId = normalizeId(currentFolderId);
            const deletedIds = changes
                .filter((change) => change.action === "delete" &&
                normalizeId(change.parentId) === normalizedCurrentFolderId)
                .map((change) => normalizeId(change.item.id))
                .filter(Boolean);
            if (deletedIds.length > 0) {
                const deletedIdSet = new Set(deletedIds);
                setImages((items) => items.filter((item) => !deletedIdSet.has(normalizeId(item.id))));
                setSearchResults((items) => items.filter((item) => !deletedIdSet.has(normalizeId(item.id))));
                setSelectedImageIds((ids) => ids.filter((id) => !deletedIdSet.has(normalizeId(id))));
                if (selectedImageRef.current) {
                    const selectedId = normalizeId(selectedImageRef.current.id);
                    if (deletedIdSet.has(selectedId)) {
                        selectedImageRef.current = undefined;
                        lastSelectedImageId.current = undefined;
                        setSelectedImage(undefined);
                    }
                }
            }
            const shouldRefreshVisibleMedia = changes.some((change) => {
                if (change.action === "delete")
                    return false;
                if (normalizeId(change.item.id) === normalizedCurrentFolderId &&
                    change.changes.children) {
                    return true;
                }
                const changedItemId = normalizeId(change.item.id);
                return imagesRef.current.some((image) => normalizeId(image.id) === changedItemId);
            });
            if (shouldRefreshVisibleMedia) {
                refreshVisibleMedia();
            }
        });
        return () => {
            unsubscribe();
        };
    }, [editContext?.itemsRepository, currentFolderId, refreshVisibleMedia]);
    const displayImages = useMemo(() => {
        return searchQuery.trim() ? searchResults : images;
    }, [searchQuery, searchResults, images]);
    const updateSelection = useCallback((thumbnail, ev) => {
        selectedImageRef.current = thumbnail;
        setSelectedImage(thumbnail);
        if (ev.shiftKey && lastSelectedImageId.current) {
            const lastIndex = displayImages.findIndex((x) => x.id === lastSelectedImageId.current);
            const currentIndex = displayImages.findIndex((x) => x.id === thumbnail.id);
            if (lastIndex !== -1 && currentIndex !== -1) {
                const start = Math.min(lastIndex, currentIndex);
                const end = Math.max(lastIndex, currentIndex);
                setSelectedImageIds(displayImages.slice(start, end + 1).map((x) => x.id));
                return;
            }
        }
        if (ev.ctrlKey || ev.metaKey) {
            setSelectedImageIds((ids) => {
                const nextIds = ids.includes(thumbnail.id)
                    ? ids.filter((id) => id !== thumbnail.id)
                    : [...ids, thumbnail.id];
                return nextIds.length > 0 ? nextIds : [thumbnail.id];
            });
            lastSelectedImageId.current = thumbnail.id;
            return;
        }
        setSelectedImageIds([thumbnail.id]);
        lastSelectedImageId.current = thumbnail.id;
    }, [displayImages]);
    const handleClick = useCallback(async (thumbnail, ev) => {
        updateSelection(thumbnail, ev);
        if (ev.shiftKey || ev.ctrlKey || ev.metaKey)
            return;
        if (isMediaFolderItem(thumbnail)) {
            setCurrentFolderId(thumbnail.id);
            setSelectedImage(undefined);
            selectedImageRef.current = undefined;
            setSelectedImageIds([]);
            lastSelectedImageId.current = undefined;
            setSearchQuery("");
            setSearchResults([]);
            return;
        }
        // Open the media item in the slot next to the active one (or create new if no next slot exists)
        if (editContext) {
            // Check if thumbnail has language/version (from ItemTreeNodeData) or use defaults
            const contextMenuThumbnail = thumbnail;
            const itemLanguage = contextMenuThumbnail.language || language;
            const itemVersion = contextMenuThumbnail.version ?? 0;
            const slots = editContext.editorSlots;
            const activeSlotId = editContext.activeSlotId;
            // If the user clicked inside a non-active slot, `activeSlotId` may still point
            // to a different slot. Infer the host slot from the DOM and treat that as the base.
            const hostSlotId = ev.currentTarget
                .closest('[data-editor-slot="true"]')
                ?.getAttribute("data-slotid") ?? null;
            const baseSlotId = hostSlotId || activeSlotId;
            // Proactively activate the host slot so follow-up UI actions behave consistently.
            if (hostSlotId && hostSlotId !== activeSlotId) {
                editContext.setActiveSlot(hostSlotId);
            }
            // Check if item is already open in any slot - if so, switch to that slot instead of opening a new one
            const existingSlot = slots.find((s) => s.itemDescriptor.id === thumbnail.id &&
                s.itemDescriptor.language === itemLanguage &&
                s.itemDescriptor.version === itemVersion);
            if (existingSlot) {
                // Item is already open - just switch to that slot
                editContext.setActiveSlot(existingSlot.slotId);
                // Ensure selectedImage is still set
                if (selectedImageRef.current?.id !== thumbnail.id) {
                    setSelectedImage(thumbnail);
                    selectedImageRef.current = thumbnail;
                }
                return;
            }
            // Find the slot next to the active one
            let nextSlotId = null;
            if (baseSlotId && slots.length > 0) {
                const baseIndex = slots.findIndex((s) => s.slotId === baseSlotId);
                if (baseIndex !== -1 && baseIndex < slots.length - 1) {
                    // There's a slot to the right of the clicked (or active) one
                    nextSlotId = slots[baseIndex + 1]?.slotId ?? null;
                }
            }
            // Use setTimeout to defer loadItem slightly, allowing selection to render first
            await new Promise((resolve) => setTimeout(resolve, 0));
            await editContext.loadItem({
                id: thumbnail.id,
                language: itemLanguage,
                version: itemVersion,
            }, nextSlotId
                ? {
                    targetSlotId: nextSlotId,
                }
                : {
                    openInNewSlot: true,
                });
            // Ensure selectedImage is still set after loadItem (in case re-render reset it)
            if (selectedImageRef.current?.id !== thumbnail.id) {
                setSelectedImage(thumbnail);
                selectedImageRef.current = thumbnail;
            }
        }
    }, [editContext, language, updateSelection]);
    const handleContextMenu = useCallback((thumbnail, ev) => {
        const itemIds = selectedImageIds.includes(thumbnail.id)
            ? selectedImageIds
            : [thumbnail.id];
        if (!selectedImageIds.includes(thumbnail.id)) {
            selectedImageRef.current = thumbnail;
            setSelectedImage(thumbnail);
            setSelectedImageIds([thumbnail.id]);
            lastSelectedImageId.current = thumbnail.id;
        }
        const contextMenuThumbnail = thumbnail;
        const itemLanguage = contextMenuThumbnail.language || language;
        const itemVersion = contextMenuThumbnail.version ?? 0;
        void showItemContextMenu({
            editContext,
            event: ev,
            itemIds,
            language: itemLanguage,
            version: itemVersion,
            openInNewSlotItem: {
                id: thumbnail.id,
                language: itemLanguage,
                version: itemVersion,
                database: "master",
            },
        });
    }, [editContext, language, selectedImageIds]);
    const handleUpload = async () => {
        if (!currentFolderId)
            return;
        const fileInput = document.createElement("input");
        fileInput.type = "file";
        fileInput.multiple = true;
        fileInput.accept = "*/*";
        fileInput.onchange = async (e) => {
            const files = Array.from(e.target.files || []);
            if (files.length > 0) {
                await uploadFiles(files);
            }
        };
        fileInput.click();
    };
    const uploadFiles = useCallback(async (files) => {
        if (!currentFolderId || files.length === 0)
            return;
        const formData = new FormData();
        files.forEach((file, index) => {
            formData.append("file" + index, file);
        });
        try {
            setUploading(true);
            const response = await fetch("/parhelia/upload?folder=" + currentFolderId, {
                method: "POST",
                body: formData,
            });
            if (!response.ok) {
                throw new Error("Upload failed");
            }
            // Reload media files after successful upload
            await loadMediaFiles(true);
        }
        catch (error) {
            console.error("Error uploading files:", error);
            toast.error("Failed to upload files. Please try again.");
        }
        finally {
            setUploading(false);
        }
    }, [currentFolderId, loadMediaFiles]);
    const isFileDrag = (event) => Array.from(event.dataTransfer.types).includes("Files");
    const handleDragEnter = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        dragDepthRef.current += 1;
        if (currentFolderId && !uploading) {
            setIsDragOver(true);
        }
    }, [currentFolderId, uploading]);
    const handleDragOver = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        event.dataTransfer.dropEffect =
            currentFolderId && !uploading ? "copy" : "none";
    }, [currentFolderId, uploading]);
    const handleDragLeave = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
        if (dragDepthRef.current === 0) {
            setIsDragOver(false);
        }
    }, []);
    const handleDrop = useCallback((event) => {
        if (!isFileDrag(event))
            return;
        event.preventDefault();
        event.stopPropagation();
        dragDepthRef.current = 0;
        setIsDragOver(false);
        if (!currentFolderId || uploading)
            return;
        const files = Array.from(event.dataTransfer.files);
        if (files.length > 0) {
            void uploadFiles(files);
        }
    }, [currentFolderId, uploading, uploadFiles]);
    // Create stable click handlers map to prevent ThumbnailItem re-renders
    const clickHandlers = useMemo(() => {
        const handlers = new Map();
        displayImages.forEach((t) => {
            handlers.set(t.id, (ev) => void handleClick(t, ev));
        });
        return handlers;
    }, [displayImages, handleClick]);
    const contextMenuHandlers = useMemo(() => {
        const handlers = new Map();
        displayImages.forEach((t) => {
            handlers.set(t.id, (ev) => handleContextMenu(t, ev));
        });
        return handlers;
    }, [displayImages, handleContextMenu]);
    const GridView = useMemo(() => {
        return (_jsx("div", { className: "grid gap-3 p-4", style: {
                gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
            }, children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), viewMode: "grid" }, t.id))) }));
    }, [displayImages, selectedImageIds, clickHandlers, contextMenuHandlers]);
    const LargeGridView = useMemo(() => {
        return (_jsx("div", { className: "grid gap-4 p-4", style: {
                gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
            }, children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), viewMode: "large-grid" }, t.id))) }));
    }, [displayImages, selectedImageIds, clickHandlers, contextMenuHandlers]);
    const ListView = useMemo(() => {
        return (_jsx("div", { className: "flex flex-col gap-1 p-2", children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), viewMode: "list" }, t.id))) }));
    }, [displayImages, selectedImageIds, clickHandlers, contextMenuHandlers]);
    const renderContent = useMemo(() => {
        const isDisplayingSearch = searchQuery.trim();
        const currentLoading = isDisplayingSearch ? searching : loading;
        if (currentLoading) {
            return (_jsx("div", { className: "flex h-64 items-center justify-center", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin" }) }));
        }
        if (displayImages.length === 0) {
            return (_jsxs("div", { className: "text-neutral-grey-50 flex h-64 flex-col items-center justify-center", children: [_jsx("div", { className: "mb-4 text-4xl", children: isDisplayingSearch ? "🔍" : "📁" }), _jsx("div", { className: "text-lg font-medium", children: isDisplayingSearch ? "No results found" : "No media files found" }), _jsx("div", { className: "text-sm", children: isDisplayingSearch
                            ? "Try a different search term"
                            : "Upload some media files to get started" })] }));
        }
        switch (viewMode) {
            case "grid":
                return GridView;
            case "large-grid":
                return LargeGridView;
            case "list":
                return ListView;
            default:
                return GridView;
        }
    }, [
        viewMode,
        displayImages,
        searchQuery,
        searching,
        loading,
        GridView,
        LargeGridView,
        ListView,
    ]);
    return (_jsxs("div", { className: "relative flex h-full flex-col", onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [uploading && (_jsxs("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/50 backdrop-blur-[1px]", children: [_jsx(Spinner, { size: "3xl" }), _jsx("span", { className: "text-neutral-grey-50 text-sm font-medium", children: "Uploading media..." })] })), isDragOver && !uploading && (_jsx("div", { className: "bg-feedback-blue-light/70 pointer-events-none absolute inset-0 z-10 flex items-center justify-center backdrop-blur-[1px]", children: _jsxs("div", { className: "border-feedback-blue text-feedback-blue flex flex-col items-center gap-2 rounded-lg border-2 border-dashed bg-white/90 px-8 py-6 shadow-sm", children: [_jsx(Upload, { className: "h-8 w-8" }), _jsx("span", { className: "text-sm font-medium", children: "Drop files to upload them here" })] }) })), _jsxs("div", { className: "bg-neutral-grey-5 flex items-center justify-between border-b px-4 py-2", children: [_jsxs("div", { className: "text-neutral-grey-100 text-xs font-medium", children: [searchQuery.trim() ? searchResults.length : images.length, " media file", (searchQuery.trim() ? searchResults.length : images.length) !== 1
                                ? "s"
                                : "", searchQuery.trim() && " found"] }), _jsxs("div", { className: "flex gap-1", children: [_jsx(Button, { size: "sm", variant: viewMode === "grid" ? "outline" : "default", onClick: () => setViewMode("grid"), title: "Grid View", className: "p-1", children: _jsx(Grid3X3, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", variant: viewMode === "large-grid" ? "outline" : "default", onClick: () => setViewMode("large-grid"), title: "Large Grid View", className: "p-1", children: _jsx(Square, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", variant: viewMode === "list" ? "outline" : "default", onClick: () => setViewMode("list"), title: "List View", className: "p-1", children: _jsx(List, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", onClick: handleUpload, disabled: uploading || !currentFolderId, title: "Upload Files", className: "ml-2 p-1", children: _jsx(Upload, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", onClick: () => void loadMediaFiles(true), title: "Refresh", className: "ml-1 p-1", children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] })] }), _jsx("div", { className: "border-b bg-white px-4 py-2", children: _jsx(FilterInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Search media files...", loading: searching, onClear: () => setSearchQuery("") }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto", style: {
                    scrollbarWidth: "thin",
                    scrollbarColor: "var(--color-neutral-grey-50) var(--color-neutral-grey-5)",
                }, children: renderContent }), selectedImage && (_jsxs("div", { className: "bg-neutral-grey-5 border-t p-3", children: [_jsxs("div", { className: "text-neutral-grey-100 truncate text-xs font-medium", children: ["Selected: ", selectedImage.name] }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs", children: "Click to select media item" })] }))] }));
}
//# sourceMappingURL=MediaFolderBrowser.js.map