import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { editorCn } from "../../utils/cn.js";
import './DragContext.css';
const b = editorCn('preview');
// Context for drag and drop operations
export const DragContext = React.createContext({
    draggedItem: null,
    setDraggedItem: () => { },
    previewRef: { current: null },
    showPreview: () => { },
    hidePreview: () => { },
});
// Component for the drag preview
const DragPreview = React.forwardRef((_, ref) => {
    return _jsx("div", { ref: ref, className: b(), style: { display: 'none' } });
});
DragPreview.displayName = 'DragPreview';
// Provider component for drag context
export const DragContextProvider = ({ children }) => {
    const [draggedItem, setDraggedItem] = React.useState(null);
    const previewRef = React.useRef(null);
    const showPreview = React.useCallback((rect, item) => {
        if (!previewRef.current)
            return;
        const previewEl = previewRef.current;
        previewEl.style.display = 'block';
        previewEl.style.width = `${rect.width}px`;
        previewEl.style.top = `${rect.bottom}px`;
        previewEl.style.left = `${rect.left}px`;
        previewEl.innerHTML = `
            <div class="${b('content')}">
                <div class="${b('type')}">${item.type}</div>
                ${item.treeTitle ? `<div class="${b('title')}">${item.treeTitle}</div>` : ''}
            </div>
        `;
    }, []);
    const hidePreview = React.useCallback(() => {
        if (previewRef.current) {
            previewRef.current.style.display = 'none';
        }
    }, []);
    return (_jsxs(DragContext.Provider, { value: { draggedItem, setDraggedItem, previewRef, showPreview, hidePreview }, children: [children, _jsx(DragPreview, { ref: previewRef })] }));
};
//# sourceMappingURL=DragContext.js.map
