import React, { forwardRef, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { DragAndDropContext, } from '@wix/wix-style-react-incubator/drag-and-drop';
import { DragAndDropAnnouncements } from '../DragAndDrop/DragAndDropAnnouncements';
import { dragHandleTestEvents, sortableItemTestEvents, } from '../GridDragAndDropDndKit/dndTestEventHandlers';
import { addEventListener } from '@wix/bex-core/util';
import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';
import { validateNestedTableDragAndDropProps } from './validateNestedTableDragAndDropProps';
import { DragOverlayTestComponent } from '../DragAndDrop/DragOverlayTestComponent';
import { NestedTableDragAndDropOverlay } from './NestedTableDragAndDropOverlay';
import { createUseIsDropDisabled } from './createUseIsDropDisabled';
import { usePageContext } from '@wix/bex-core/react';
function _NestedTableDragAndDropContext(props) {
    const { state: nestedState, onSubmit, onBulkSubmit, children } = props;
    const { type: Table, props: tableProps } = children;
    if (process.env.NODE_ENV !== 'production') {
        minimalRequiredWdsRuntimeCheck({
            required: '^1.109.2',
            requiredBy: 'WixPatterns/NestedTable',
        });
        validateNestedTableDragAndDropProps(nestedState);
    }
    const state = nestedState.nestedTableDragAndDrop;
    const useIsDropDisabled = createUseIsDropDisabled(state);
    const dragAndDropState = state.dnd;
    const { modalsContainerRef } = usePageContext();
    useEffect(() => state.init(), []);
    dragAndDropState.onSubmit = onSubmit;
    dragAndDropState.onBulkSubmit = onBulkSubmit;
    const [dragAndDropContext] = useState(() => ({
        useIsDropDisabled,
        closestCenterOnViewPort: true,
        onDragAndDropDisabledRowPointerDown: (id, e) => {
            dragAndDropState.attachDisabledDragAttempt(id, e, 'y');
        },
        cancelDrop: async (ev) => {
            return dragAndDropState.beforeDrop(ev);
        },
        dropAnimation: {
            duration: dragAndDropState.dropAnimation.duration,
            easing: dragAndDropState.dropAnimation.easing,
        },
        announcements: dragAndDropState.nullAnnouncements,
        a11yContainer: modalsContainerRef.current,
        onDragOver: ({ over }) => dragAndDropState.onDragOver({ over }),
        onDragMove: (event) => dragAndDropState.onDragMove(event),
        restoreFocus: false,
        onDropAnimationEnd: (id, dragHandleRef) => {
            return addEventListener(dragAndDropState.events, 'dropAnimationEnd', () => {
                dragAndDropState.focusDragHandleIfDropped(id, dragHandleRef.current);
            });
        },
        overlayWrapperElement: forwardRef((props, ref) => (React.createElement(NestedTableDragAndDropOverlay, { innerRef: ref, state: state, ...props }))),
        ...(process.env.NODE_ENV === 'test' && {
            DragOverlayComponentType: (props) => (React.createElement(DragOverlayTestComponent, { ...props, state: dragAndDropState })),
        }),
        keyboardCodes: dragAndDropState.keyboardCodes,
        autoScrollOptions: {
            acceleration: 6,
        },
        hideOverlayBottomShadow: true,
        eventHandlers: {
            row: ({ id, disabled }) => {
                const testEvents = process.env.NODE_ENV === 'test'
                    ? sortableItemTestEvents({
                        state: dragAndDropState,
                        id,
                        disabled,
                    })
                    : undefined;
                return {
                    ...testEvents,
                    onPointerDown: (e) => {
                        dragAndDropState.containerEvents.onPointerDown?.(e);
                        testEvents?.onPointerDown?.(e);
                    },
                };
            },
            handle: ({ id }) => ({
                onPointerDown: (e) => {
                    dragAndDropState.handleEvents.onPointerDown?.(e);
                },
                onKeyDown: (e) => {
                    dragAndDropState.handleEvents.onKeyDown?.(e);
                },
                ...(process.env.NODE_ENV === 'test' &&
                    dragHandleTestEvents({
                        state: dragAndDropState,
                        id,
                    })),
            }),
        },
    }));
    dragAndDropContext.a11yContainer = modalsContainerRef.current;
    return (React.createElement(DragAndDropContext.Provider, { value: dragAndDropContext },
        React.createElement(Table, { ...tableProps, isDragAndDropDisabled: dragAndDropState.isDisabled, onDragStart: (event) => dragAndDropState.onDragStart(event), onDragEnd: (event) => dragAndDropState.onDragEnd(event), onDragCancel: () => dragAndDropState.onDragCancel() }),
        React.createElement(DragAndDropAnnouncements, { state: dragAndDropState, dataHook: "collection-table-dnd-live-region" })));
}
export const NestedTableDragAndDropContext = observer(_NestedTableDragAndDropContext);
//# sourceMappingURL=NestedTableDragAndDropContext.js.map