import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { mergeCSSClasses, } from "@endexai/blocknote-core";
import { useState } from "react";
import { createPortal } from "react-dom";
import { MdDragIndicator } from "react-icons/md";
import { useComponentsContext } from "../../editor/ComponentsContext.js";
import { TableHandleMenu } from "./TableHandleMenu/TableHandleMenu.js";
/**
 * By default, the TableHandle component will render with the default icon.
 * However, you can override the icon to render by passing children.
 */
export const TableHandle = (props) => {
    const Components = useComponentsContext();
    const [isDragging, setIsDragging] = useState(false);
    const Component = props.tableHandleMenu || TableHandleMenu;
    return (_jsxs(Components.Generic.Menu.Root, { onOpenChange: (open) => {
            if (open) {
                props.freezeHandles();
                props.hideOtherSide();
            }
            else {
                props.unfreezeHandles();
                props.showOtherSide();
                props.editor.focus();
            }
        }, position: "right", children: [_jsx(Components.Generic.Menu.Trigger, { children: _jsx(Components.TableHandle.Root, { className: mergeCSSClasses("bn-table-handle", isDragging ? "bn-table-handle-dragging" : ""), draggable: true, onDragStart: (e) => {
                        setIsDragging(true);
                        props.dragStart(e);
                    }, onDragEnd: () => {
                        props.dragEnd();
                        setIsDragging(false);
                    }, style: props.orientation === "column"
                        ? { transform: "rotate(0.25turn)" }
                        : undefined, children: props.children || (_jsx(MdDragIndicator, { size: 24, "data-test": "tableHandle" })) }) }), createPortal(_jsx(Component, { orientation: props.orientation, block: props.block, index: props.index }), props.menuContainer)] }));
};
//# sourceMappingURL=TableHandle.js.map