import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
import { useCallback, useRef } from "react";
import { useState } from "react";
import { Spinner } from "../ui/Spinner";
import { Upload } from "lucide-react";
export function UploadZone({ selectedFolderId, uploadCompleted, }) {
    const [isDragging, setIsDragging] = useState(false);
    const [isUploading, setIsUploading] = useState(false);
    const dragZoneRef = useRef(null);
    const handleDragOver = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
    }, []);
    const handleDragEnter = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        if (dragZoneRef.current === e.target) {
            setIsDragging(true);
        }
    }, []);
    const handleDragLeave = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        if (dragZoneRef.current?.contains(e.target)) {
            return;
        }
        setIsDragging(false);
    }, []);
    const handleDrop = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        setIsDragging(false);
        const files = Array.from(e.dataTransfer.files);
        if (files.length > 0) {
            onFilesDropped(files);
        }
    }, [selectedFolderId]);
    const onFilesDropped = useCallback(async (files) => {
        const formData = new FormData();
        files.forEach((file, index) => {
            formData.append("file" + index, file);
        });
        try {
            setIsUploading(true);
            const response = await fetch("/parhelia/upload?folder=" + selectedFolderId, {
                method: "POST",
                body: formData,
            });
            setIsUploading(false);
            if (!response.ok) {
                throw new Error("Upload failed");
            }
            uploadCompleted();
        }
        catch (error) {
            console.error("Error uploading files:", error);
        }
    }, [selectedFolderId]);
    if (isUploading) {
        return (_jsxs("div", { className: "text-neutral-grey-50 flex items-center justify-center gap-2 rounded-lg border-2 border-dashed p-4 text-sm", children: [_jsx(Spinner, { size: "2xl" }), " Uploading..."] }));
    }
    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: dragZoneRef, className: cn("mx-6 my-4 flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-4", isDragging
                    ? "border-feedback-blue bg-feedback-blue-light"
                    : "border-border-default hover:border-feedback-blue hover:bg-neutral-grey-5"), onDragOverCapture: handleDragOver, onDragEnterCapture: handleDragEnter, onDragLeaveCapture: handleDragLeave, onDropCapture: handleDrop, onClick: () => {
                    const fileInput = document.createElement("input");
                    fileInput.type = "file";
                    fileInput.multiple = true;
                    fileInput.accept = "image/*,video/*";
                    fileInput.onchange = (e) => {
                        const files = Array.from(e.target.files || []);
                        if (files.length > 0) {
                            onFilesDropped(files);
                        }
                    };
                    fileInput.click();
                }, children: _jsxs("div", { className: "flex cursor-pointer items-center gap-2", children: [_jsx(Upload, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm", children: isDragging
                                ? "Drop files here"
                                : "Click to upload or drop files here" })] }) }), isDragging && (_jsx("div", { className: "border-feedback-blue pointer-events-none absolute inset-0 border-2 border-dashed" }))] }));
}
//# sourceMappingURL=UploadZone.js.map