import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { setSelectedNode } from "@powerhousedao/reactor-browser";
import { useEffect, useState, } from "react";
import { twMerge } from "tailwind-merge";
import { useDrop } from "../../hooks/use-drop.js";
import { ConnectReplaceDuplicateModal } from "../modal/replace-duplicate-modal.js";
import { UploadFileListContainer } from "./upload-file-list-container.js";
import { useUploadTracker } from "./use-upload-tracker.js";
import {} from "./utils.js";
export function DropZone(props) {
    const { title = "Drag your documents", subtitle = "to drop them in the currently selected folder.", node, enable = true, children, onAddFile, useLocalStorage = false, driveId, acceptedFileExtensions = [".zip", ".phd", ".phdm"], className, ...delegatedProps } = props;
    // Modal state for conflict resolution
    const [modalOpen, setModalOpen] = useState(false);
    const [conflictUploadId, setConflictUploadId] = useState(null);
    // Upload tracking with the new hook
    const { uploadsArray, uploadsCount, createUploadHandler, clearAllUploads, clearConflictedUploads, removeUpload, resolveConflict, } = useUploadTracker(useLocalStorage, driveId);
    // Clear conflicted uploads on mount
    useEffect(() => {
        clearConflictedUploads();
    }, []);
    // Create the upload handler from the hook
    const handleAddFile = createUploadHandler(onAddFile) ?? (async () => { });
    // Handle conflict resolution modal
    const handleConflictResolution = (uploadId) => {
        setConflictUploadId(uploadId);
        setModalOpen(true);
    };
    const handleReplace = () => {
        if (conflictUploadId && onAddFile) {
            resolveConflict(conflictUploadId, "replace", onAddFile);
        }
        setModalOpen(false);
        setConflictUploadId(null);
    };
    const handleDuplicate = () => {
        if (conflictUploadId && onAddFile) {
            resolveConflict(conflictUploadId, "duplicate", onAddFile);
        }
        setModalOpen(false);
        setConflictUploadId(null);
    };
    const handleModalClose = () => {
        setModalOpen(false);
        setConflictUploadId(null);
    };
    const { isDropTarget, dropProps } = useDrop({
        target: node,
        onAddFileOverride: handleAddFile,
        trackNestedDrag: true,
        acceptedFileExtensions,
    });
    return (_jsxs("div", { className: twMerge("relative", className), ...(enable ? dropProps : {}), ...delegatedProps, children: [children, enable && isDropTarget && (_jsx("div", { className: "fixed inset-0 z-[1000] flex min-h-screen w-screen items-center justify-center bg-black/50", children: _jsx("div", { className: "rounded-[24px] bg-white p-6 shadow-[1px_4px_15px_rgba(74,88,115,0.25)]", children: _jsxs("div", { className: "relative flex h-[130px] w-[400px] flex-col items-center justify-start overflow-visible rounded-lg border border-dashed border-black px-4 py-6", children: [_jsx("div", { className: "text-center text-base leading-5 text-zinc-500", children: title }), _jsx("div", { className: "text-center text-base leading-5 text-zinc-500", children: subtitle }), _jsx("span", { className: "pointer-events-none absolute -bottom-16 left-1/2 z-10 -translate-x-1/2", children: _jsx(Icon, { name: "DocumentIcons", size: 144, "aria-hidden": "true" }) })] }) }) })), _jsx(UploadFileListContainer, { uploadsArray: uploadsArray, uploadsCount: uploadsCount, removeUpload: removeUpload, clearAllUploads: clearAllUploads, setSelectedNode: setSelectedNode, onConflictResolution: handleConflictResolution }), _jsx(ConnectReplaceDuplicateModal, { open: modalOpen, onOpenChange: handleModalClose, fileName: conflictUploadId
                    ? uploadsArray.find((u) => u?.id === conflictUploadId)?.fileName
                    : undefined, onReplace: handleReplace, onDuplicate: handleDuplicate })] }));
}
//# sourceMappingURL=drop-zone.js.map