import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { setSelectedNode, showDeleteNodeModal, useNodeActions, useUserPermissions, } from "@powerhousedao/reactor-browser";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import { defaultNodeOptions, nodeOptionsMap } from "../../constants/options.js";
import { useDrag } from "../../hooks/use-drag.js";
import { useDrop } from "../../hooks/use-drop.js";
import { ConnectDropdownMenu } from "../dropdown-menu/dropdown-menu.js";
import { NodeInput } from "../node-input/node-input.js";
export function FolderItem(props) {
    const { folderNode, className } = props;
    const { isAllowedToCreateDocuments } = useUserPermissions();
    const [mode, setMode] = useState("READ");
    const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
    const { dragProps } = useDrag({ node: folderNode });
    const { onRenameNode, onRenameDriveNodes, onDuplicateNode } = useNodeActions();
    const { isDropTarget, dropProps } = useDrop({
        target: folderNode,
    });
    const isReadMode = mode === "READ";
    function onCancel() {
        setMode("READ");
    }
    function onSubmit(name) {
        if (name === folderNode.name) {
            setMode("READ");
            return;
        }
        Promise.all([
            onRenameNode(name, folderNode),
            onRenameDriveNodes(name, folderNode.id),
        ])
            .catch((error) => {
            console.error(error);
        })
            .finally(() => {
            setMode("READ");
        });
    }
    const dropdownMenuHandlers = {
        DUPLICATE: () => onDuplicateNode(folderNode),
        RENAME: () => setMode("WRITE"),
        DELETE: () => showDeleteNodeModal(folderNode),
    };
    const dropdownMenuOptions = Object.entries(nodeOptionsMap)
        .map(([id, option]) => ({
        ...option,
        id: id,
    }))
        .filter((option) => defaultNodeOptions.includes(option.id));
    function onDropdownMenuOptionClick(itemId) {
        const handler = dropdownMenuHandlers[itemId];
        if (!handler) {
            console.error(`No handler found for dropdown menu item: ${itemId}`);
            return;
        }
        handler();
        setIsDropdownMenuOpen(false);
    }
    const content = isReadMode || !isAllowedToCreateDocuments ? (_jsx("div", { className: "ml-3 max-h-6 truncate font-medium text-gray-600 group-hover:text-gray-800", children: folderNode.name })) : (_jsx(NodeInput, { className: "ml-3 font-medium", defaultValue: folderNode.name, onCancel: onCancel, onSubmit: onSubmit }));
    const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2", className, isDropTarget && "bg-blue-100");
    return (_jsx("div", { className: "relative w-64", onClick: isReadMode ? () => setSelectedNode(folderNode) : undefined, children: _jsxs("div", { ...dragProps, ...dropProps, className: containerStyles, children: [_jsxs("div", { className: "flex items-center overflow-hidden", children: [_jsx("div", { className: "p-1", children: _jsx("div", { className: "relative", children: _jsx(Icon, { name: "FolderClose", size: 24 }) }) }), content] }), isReadMode && isAllowedToCreateDocuments ? (_jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: _jsx("button", { className: twMerge("ml-auto hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
                            e.stopPropagation();
                            setIsDropdownMenuOpen(true);
                        }, children: _jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) })) : null] }) }));
}
//# sourceMappingURL=folder-item.js.map