import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
import { Check } from "lucide-react";
import { useEditContext } from "../client/editContext";
import { showItemContextMenu } from "../itemContextMenu";
import { useEffect, useRef, useState, } from "react";
export function Thumbnails({ images, selectedImage, setSelectedImage, onMediaSelected, onHide, language, }) {
    const editContext = useEditContext();
    const [selectedImageIds, setSelectedImageIds] = useState([]);
    const lastSelectedImageId = useRef(undefined);
    useEffect(() => {
        if (!selectedImage)
            return;
        setSelectedImageIds((ids) => (ids.length === 0 ? [selectedImage.id] : ids));
        lastSelectedImageId.current ??= selectedImage.id;
    }, [selectedImage]);
    const selectImage = (image, event) => {
        if (event.shiftKey && lastSelectedImageId.current) {
            const lastIndex = images.findIndex((x) => x.id === lastSelectedImageId.current);
            const currentIndex = images.findIndex((x) => x.id === image.id);
            if (lastIndex !== -1 && currentIndex !== -1) {
                const start = Math.min(lastIndex, currentIndex);
                const end = Math.max(lastIndex, currentIndex);
                const rangeIds = images.slice(start, end + 1).map((x) => x.id);
                setSelectedImageIds(rangeIds);
                setSelectedImage(image);
                return;
            }
        }
        if (event.ctrlKey || event.metaKey) {
            setSelectedImageIds((ids) => {
                const nextIds = ids.includes(image.id)
                    ? ids.filter((id) => id !== image.id)
                    : [...ids, image.id];
                return nextIds.length > 0 ? nextIds : [image.id];
            });
            lastSelectedImageId.current = image.id;
            setSelectedImage(image);
            return;
        }
        setSelectedImageIds([image.id]);
        lastSelectedImageId.current = image.id;
        setSelectedImage(image);
    };
    return (_jsx("div", { "data-testid": "media-selector-thumbnails-container", className: "absolute inset-0 overflow-auto p-4", children: images.length === 0 ? (_jsxs("div", { className: "text-neutral-grey-50 flex h-full flex-col items-center justify-center", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", className: "mb-2 opacity-20", children: [_jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }), _jsx("circle", { cx: "9", cy: "9", r: "2" }), _jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })] }), _jsx("p", { className: "text-sm", children: "No media found in this folder" })] })) : (_jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(140px,140px))] content-start justify-center gap-4", children: images.map((t) => (_jsxs("div", { className: cn("group relative flex h-[140px] w-[140px] cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg border bg-white transition-all duration-200 hover:shadow-md", selectedImageIds.includes(t.id)
                    ? "border-primary ring-primary ring-2"
                    : "hover:border-primary/50 border-border-default"), onDoubleClick: () => {
                    onMediaSelected(t.id);
                    onHide();
                }, onClick: (event) => selectImage(t, event), onContextMenu: (event) => {
                    const thumbnail = t;
                    const itemIds = selectedImageIds.includes(t.id)
                        ? selectedImageIds
                        : [t.id];
                    if (!selectedImageIds.includes(t.id)) {
                        setSelectedImageIds([t.id]);
                        lastSelectedImageId.current = t.id;
                        setSelectedImage(t);
                    }
                    void showItemContextMenu({
                        editContext,
                        event,
                        itemIds,
                        language: thumbnail.language || language,
                        version: thumbnail.version ?? 0,
                    });
                }, children: [_jsx("div", { className: "flex h-full w-full items-center justify-center p-2", children: _jsx("img", { src: t.thumbUrl, className: "max-h-full max-w-full object-contain transition-transform duration-300 group-hover:scale-105", loading: "lazy" }) }), selectedImageIds.includes(t.id) && (_jsx("div", { className: "bg-primary/5 pointer-events-none absolute inset-0" })), selectedImageIds.includes(t.id) && (_jsx("div", { className: "absolute top-1.5 right-1.5 z-10", children: _jsx("div", { className: "bg-primary flex h-5 w-5 items-center justify-center rounded-full text-white shadow-sm", children: _jsx(Check, { className: "h-3.5 w-3.5 stroke-[3]" }) }) })), _jsx("div", { className: "bg-neutral-grey-100/60 badge-pad absolute inset-x-0 bottom-0 translate-y-full text-[10px] text-white transition-transform duration-200 group-hover:translate-y-0", children: _jsx("p", { className: "truncate text-center", title: t.name, children: t.name }) })] }, t.id))) })) }));
}
//# sourceMappingURL=Thumbnails.js.map