import { Box, Popover } from '@wix/design-system';
import React from 'react';
import { DepthLimitMessage } from './DepthLimitMessage';
import { observer } from 'mobx-react-lite';
import { DragAndDropDisabledMessage } from './DragAndDropDisabledMessage';
function _NestedTableDragAndDropOverlayPopover(props) {
    const { state, children } = props;
    const { reachedMaxDepth, dragAndDropDisabled } = state;
    const { errorMessage } = dragAndDropDisabled || {};
    return (React.createElement(Popover, { showArrow: true, shown: !!dragAndDropDisabled || reachedMaxDepth, appendTo: "parent", placement: "top", dataHook: "nested-table-dnd-overlay-popover" },
        React.createElement(Popover.Element, null, children),
        React.createElement(Popover.Content, null,
            React.createElement(Box, { padding: "6px 8px" }, errorMessage ? (React.createElement(DragAndDropDisabledMessage, { message: errorMessage })) : (React.createElement(DepthLimitMessage, { state: state }))))));
}
export const NestedTableDragAndDropOverlayPopover = observer(_NestedTableDragAndDropOverlayPopover);
//# sourceMappingURL=NestedTableDragAndDropOverlayPopover.js.map