import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef } from "react";
import { UploadIcon } from "lucide-react";
import { Button } from "@vertesia/ui/core";
/**
 * A reusable drop zone component for file uploads
 *
 * @example
 * <DropZone
 *   onDrop={handleFileSelect}
 *   message="Drag and drop files here"
 *   buttonLabel="Select Files"
 * />
 */
export function DropZone({ onDrop, message, buttonLabel = "Upload Files", allowFolders = true, className = "" }) {
    const [isDragging, setIsDragging] = useState(false);
    const inputRef = useRef(null);
    const dropZoneRef = useRef(null);
    const handleDragOver = (e) => {
        e.preventDefault();
        if (e.dataTransfer.types.includes('Files')) {
            setIsDragging(true);
        }
    };
    const handleDragLeave = (e) => {
        e.preventDefault();
        // Only set dragging to false if leaving the container (not entering a child)
        if (dropZoneRef.current && !dropZoneRef.current.contains(e.relatedTarget)) {
            setIsDragging(false);
        }
    };
    const handleDrop = async (e) => {
        e.preventDefault();
        setIsDragging(false);
        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
            // Handle folders using the DataTransferItemList API which supports directory reading
            const items = Array.from(e.dataTransfer.items);
            const files = [];
            const folders = new Set();
            const processEntry = async (entry) => {
                if (entry.isFile) {
                    // Get file
                    const file = await new Promise((resolve) => {
                        entry.file((file) => {
                            // Store full path in the file object for location use
                            Object.defineProperty(file, "webkitRelativePath", {
                                writable: true,
                                value: entry.fullPath.substring(1), // Remove leading slash
                            });
                            resolve(file);
                        });
                    });
                    // Skip hidden files
                    if (!file.name.startsWith(".") && file.size > 0) {
                        files.push(file);
                    }
                    // Add folder path to tracking
                    const folderPath = entry.fullPath.substring(1).split("/").slice(0, -1).join("/");
                    if (folderPath) {
                        folders.add(folderPath);
                    }
                }
                else if (entry.isDirectory) {
                    // Get folder reader
                    const reader = entry.createReader();
                    const entries = await new Promise((resolve) => {
                        reader.readEntries((entries) => {
                            resolve(entries);
                        });
                    });
                    // Process all entries
                    await Promise.all(entries.map(processEntry));
                    // Add this folder to tracking
                    const folderPath = entry.fullPath.substring(1);
                    if (folderPath) {
                        folders.add(folderPath);
                    }
                }
            };
            try {
                // Process all dropped items
                await Promise.all(items.map((item) => {
                    const entry = item.webkitGetAsEntry ? item.webkitGetAsEntry() : item;
                    if (entry) {
                        return processEntry(entry);
                    }
                    return Promise.resolve();
                }));
                if (files.length > 0) {
                    const topLevelFolders = new Set(Array.from(folders)
                        .map((path) => path.split("/")[0])
                        .filter(Boolean));
                    const folderCount = topLevelFolders.size;
                    const fileCount = files.length;
                    let message = "";
                    if (folderCount > 0) {
                        message =
                            folderCount === 1
                                ? `Preparing to upload 1 folder with ${fileCount} files...`
                                : `Preparing to upload ${folderCount} folders with ${fileCount} files...`;
                    }
                    else {
                        message = `Preparing to upload ${fileCount} file${fileCount === 1 ? "" : "s"}...`;
                    }
                    onDrop(files, { count: files.length, message });
                }
            }
            catch (error) {
                console.error("Error processing dropped files:", error);
                // Fallback to simple file array if folder processing fails
                const fileArray = Array.from(e.dataTransfer.files);
                if (fileArray.length > 0) {
                    onDrop(fileArray);
                }
            }
        }
        else if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            // Fallback for browsers that don't support items API
            const fileArray = Array.from(e.dataTransfer.files);
            onDrop(fileArray);
        }
    };
    const handleChange = (e) => {
        if (e.target.files && e.target.files.length > 0) {
            const fileArray = Array.from(e.target.files);
            // Check if there are directories (with webkitRelativePath)
            const hasDirectories = fileArray.some((file) => file.webkitRelativePath && file.webkitRelativePath.includes("/"));
            if (hasDirectories) {
                // Count the unique top-level directories
                const topLevelDirs = new Set(fileArray.map((file) => file.webkitRelativePath?.split("/")[0]).filter(Boolean));
                const folderCount = topLevelDirs.size;
                const fileCount = fileArray.length;
                // Create custom message with folder info
                const formattedMessage = folderCount === 1
                    ? `Preparing to upload 1 folder with ${fileCount} files...`
                    : `Preparing to upload ${folderCount} folders with ${fileCount} files...`;
                const customMessage = {
                    count: fileArray.length,
                    message: formattedMessage,
                };
                onDrop(fileArray, customMessage);
            }
            else {
                // Regular file upload
                const feedback = {
                    count: fileArray.length,
                    message: `Preparing to upload ${fileArray.length} file${fileArray.length === 1 ? "" : "s"}...`,
                };
                onDrop(fileArray, feedback);
            }
        }
    };
    const openFileSelector = () => {
        if (inputRef.current) {
            inputRef.current.click();
        }
    };
    return (_jsxs("div", { className: `flex flex-col items-center justify-center py-12 border-2 rounded-lg transition-colors ${isDragging ? "border-color-primary bg-color-primary/10" : "border-dashed border-color-border"} ${className}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx(UploadIcon, { className: `h-12 w-12 mb-3 transition-colors ${isDragging ? "text-primary" : "text-muted/50"}` }), _jsx("p", { className: "text-color-muted-foreground", children: message }), _jsxs("div", { className: "mt-4 text-center", children: [_jsxs("div", { className: "text-sm text-muted mb-2", children: ["Drag and drop files", allowFolders ? " or folders" : "", " here, or"] }), _jsxs(Button, { onClick: openFileSelector, children: [_jsx(UploadIcon, { className: "h-4 w-4 mr-2" }), buttonLabel] }), _jsx("input", { type: "file", ref: inputRef, onChange: handleChange, multiple: true, 
                        // @ts-expect-error: webkitdirectory is a non-standard attribute
                        webkitdirectory: allowFolders ? "" : undefined, directory: allowFolders ? "" : undefined, className: "hidden" })] })] }));
}
//# sourceMappingURL=DropZone.js.map