import React, { 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 { useTableContext } from '../../providers';
import { addEventListener } from '@wix/bex-core/util';
import { createUseIsDropDisabled } from './createUseIsDropDisabled';
import { usePageContext } from '@wix/bex-core/react';
function _TableDragAndDropContext(props) {
    const { onSubmit, onBulkSubmit, children } = props;
    const { type: Table, props: tableProps } = children;
    const tableState = useTableContext();
    const { modalsContainerRef } = usePageContext();
    const state = tableState.tableDragAndDropState;
    const dragAndDropState = state.dragAndDrop.dnd;
    const useIsDropDisabled = createUseIsDropDisabled(dragAndDropState);
    useEffect(() => state.init(), []);
    dragAndDropState.onSubmit = onSubmit;
    dragAndDropState.onBulkSubmit = onBulkSubmit;
    const [dragAndDropContext] = useState(() => ({
        useIsDropDisabled,
        onDragAndDropDisabledRowPointerDown: (id, e) => {
            dragAndDropState.attachDisabledDragAttempt(id, e, 'y');
        },
        cancelDrop: (ev) => 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);
            });
        },
        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,
                    })),
            }),
            keyboardCodes: dragAndDropState.keyboardCodes,
        },
    }));
    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 TableDragAndDropContext = observer(_TableDragAndDropContext);
//# sourceMappingURL=TableDragAndDropContext.js.map