import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from "react";
import { useEditContext } from "../client/editContext";
import { ScrollingContentTree } from "../ScrollingContentTree";
import { Button } from "../../components/ui/button";
export const CopyMoveMenuTemplate = ({ items, command, commandCallback, }) => {
    const hideTimeoutRef = useRef(undefined);
    const opRef = useRef(null);
    const editContext = useEditContext();
    const [selectedItem, setSelectedItem] = useState(items[0]?.descriptor ?? null);
    const mode = command.id === "copyItems" ? "copy" : "move";
    if (!editContext)
        return null;
    return (_jsxs("div", { className: "p-2", style: { display: "flex", alignItems: "center", cursor: "pointer" }, onMouseEnter: () => {
            if (hideTimeoutRef.current) {
                clearTimeout(hideTimeoutRef.current);
            }
            opRef.current && (opRef.current.style.display = "block");
        }, onMouseLeave: () => {
            hideTimeoutRef.current = setTimeout(() => {
                opRef.current && (opRef.current.style.display = "none");
            }, 200);
        }, onClick: (ev) => {
            ev.stopPropagation();
            ev.preventDefault();
        }, children: [_jsx("i", { className: `pi ${mode === "copy" ? "pi-copy" : "pi-arrow-right"} mr-2` }), _jsx("span", { className: "p-menuitem-text", children: mode === "copy" ? "Copy to" : "Move to" }), _jsx("div", { ref: opRef, className: "absolute z-50 rounded-md bg-white p-2 shadow-lg", onKeyDownCapture: (ev) => {
                    ev.stopPropagation();
                }, onKeyUpCapture: (ev) => {
                    ev.stopPropagation();
                }, style: {
                    display: opRef.current ? "block" : "none",
                    top: "-50px",
                    left: "100%",
                    minWidth: "450px",
                    minHeight: "380px",
                    border: "1px solid #ddd",
                }, children: _jsxs("div", { className: "absolute inset-4 flex flex-col gap-2", children: [_jsx("div", { className: "relative flex-1", children: _jsx(ScrollingContentTree, { selectedItemId: selectedItem?.id, onSelectionChange: (node) => {
                                    if (!items[0])
                                        return;
                                    if (!node[0])
                                        setSelectedItem(null);
                                    else
                                        setSelectedItem({
                                            id: node[0].id,
                                            version: 0,
                                            language: items[0].language,
                                        });
                                } }) }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: "sm", onClick: () => {
                                    if (!selectedItem)
                                        return;
                                    const result = editContext?.executeCommand({
                                        command,
                                        data: { items, targetItem: selectedItem, index: -1 },
                                    });
                                    commandCallback?.(command, result);
                                }, children: mode === "copy" ? "Copy" : "Move" }) })] }) })] }));
};
//# sourceMappingURL=CopyMoveMenu.js.map