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, canCreate = true, uploadFiles, 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 (!canCreate)
            return;
        if (dragZoneRef.current === e.target) {
            setIsDragging(true);
        }
    }, [canCreate]);
    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);
        if (!canCreate)
            return;
        const files = Array.from(e.dataTransfer.files);
        if (files.length > 0) {
            onFilesDropped(files);
        }
    }, [selectedFolderId, canCreate]);
    const onFilesDropped = useCallback(async (files) => {
        try {
            setIsUploading(true);
            await uploadFiles(files);
            uploadCompleted();
        }
        catch (error) {
            console.error("Error uploading files:", error);
        }
        finally {
            setIsUploading(false);
        }
    }, [uploadCompleted, uploadFiles]);
    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", !canCreate
                    ? "border-border-default bg-neutral-grey-5 text-neutral-grey-50 cursor-not-allowed opacity-60"
                    : 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: () => {
                    if (!canCreate)
                        return;
                    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();
                }, title: !canCreate
                    ? "You don't have permission to upload to this folder."
                    : undefined, children: _jsxs("div", { className: cn("flex items-center gap-2", canCreate ? "cursor-pointer" : "cursor-not-allowed"), children: [_jsx(Upload, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm", children: !canCreate
                                ? "No permission to upload to this folder"
                                : isDragging
                                    ? "Drop files here"
                                    : "Click to upload or drop files here" })] }) }), isDragging && canCreate && (_jsx("div", { className: "border-feedback-blue pointer-events-none absolute inset-0 border-2 border-dashed" }))] }));
}
//# sourceMappingURL=UploadZone.js.map