import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { getSyncStatusSync, setSelectedNode, showDeleteNodeModal, useNodeActions, useSelectedDriveSafe, useUserPermissions, } from "@powerhousedao/reactor-browser";
import { getDriveSharingType } from "document-drive";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import { defaultNodeOptions, nodeOptionsMap } from "../../constants/options.js";
import { useDrag } from "../../hooks/use-drag.js";
import { getDocumentIconSrc } from "../../utils/get-document-icon-src.js";
import { ConnectDropdownMenu } from "../dropdown-menu/dropdown-menu.js";
import { NodeInput } from "../node-input/node-input.js";
import { SyncStatusIcon } from "../status-icon/sync-status-icon.js";
export function FileItem(props) {
    const { fileNode, className, customDocumentIconSrc } = props;
    const [mode, setMode] = useState("READ");
    const [isDropdownMenuOpen, setIsDropdownMenuOpen] = useState(false);
    const [selectedDrive] = useSelectedDriveSafe();
    const sharingType = selectedDrive
        ? getDriveSharingType(selectedDrive)
        : "LOCAL";
    const { dragProps } = useDrag({ node: fileNode });
    const { isAllowedToCreateDocuments } = useUserPermissions();
    const { onRenameNode, onRenameDriveNodes, onDuplicateNode } = useNodeActions();
    const isReadMode = mode === "READ";
    const syncStatus = getSyncStatusSync(fileNode.id, sharingType);
    const dropdownMenuHandlers = {
        DUPLICATE: () => onDuplicateNode(fileNode),
        RENAME: () => setMode("WRITE"),
        DELETE: () => showDeleteNodeModal(fileNode),
    };
    const dropdownMenuOptions = Object.entries(nodeOptionsMap)
        .map(([id, option]) => ({
        ...option,
        id: id,
    }))
        .filter((option) => defaultNodeOptions.includes(option.id));
    function onSubmit(name) {
        if (name === fileNode.name) {
            setMode("READ");
            return;
        }
        Promise.all([
            onRenameNode(name, fileNode),
            onRenameDriveNodes(name, fileNode.id),
        ])
            .catch((error) => {
            console.error(error);
        })
            .finally(() => {
            setMode("READ");
        });
    }
    function onCancel() {
        setMode("READ");
    }
    function onDropdownMenuOptionClick(itemId) {
        const handler = dropdownMenuHandlers[itemId];
        if (!handler) {
            console.error(`No handler found for dropdown menu item: ${itemId}`);
            return;
        }
        handler();
        setIsDropdownMenuOpen(false);
    }
    const iconSrc = getDocumentIconSrc(fileNode.documentType, customDocumentIconSrc);
    const iconNode = (_jsxs("div", { className: "relative", children: [_jsx("img", { alt: "file icon", className: "max-w-none", height: 34, src: iconSrc, width: 32 }), isReadMode && syncStatus && (_jsx("div", { className: "absolute bottom-[-2px] right-0 size-3 rounded-full bg-white", children: _jsx("div", { className: "absolute left-[-2px] top-[-2px]", children: _jsx(SyncStatusIcon, { overrideSyncIcons: { SUCCESS: "CheckCircleFill" }, syncStatus: syncStatus }) }) }))] }));
    const containerStyles = twMerge("group flex h-12 cursor-pointer select-none items-center rounded-lg bg-gray-200 px-2 text-gray-600 hover:text-gray-800", className);
    const content = isReadMode ? (_jsxs("div", { className: "flex w-52 items-center justify-between", children: [_jsxs("div", { className: "mr-2 truncate group-hover:mr-0", children: [_jsx("div", { className: "max-h-6 truncate text-sm font-medium group-hover:text-gray-800", children: fileNode.name }), _jsx("div", { className: "max-h-6 truncate text-xs font-medium text-gray-600 group-hover:text-gray-800", children: fileNode.documentType })] }), isAllowedToCreateDocuments ? (_jsx(ConnectDropdownMenu, { items: dropdownMenuOptions, onItemClick: onDropdownMenuOptionClick, onOpenChange: setIsDropdownMenuOpen, open: isDropdownMenuOpen, children: _jsx("button", { className: twMerge("hidden group-hover:block", isDropdownMenuOpen && "block"), onClick: (e) => {
                        e.stopPropagation();
                        setIsDropdownMenuOpen(true);
                    }, children: _jsx(Icon, { className: "text-gray-600", name: "VerticalDots" }) }) })) : null] })) : (_jsx(NodeInput, { className: "ml-3 flex-1 font-medium", defaultValue: fileNode.name, onCancel: onCancel, onSubmit: onSubmit }));
    return (_jsx("div", { className: "relative w-64", onClick: isReadMode ? () => setSelectedNode(fileNode) : undefined, children: _jsx("div", { ...dragProps, className: containerStyles, children: _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-1.5", children: iconNode }), content] }) }) }));
}
//# sourceMappingURL=file-item.js.map