import React, { useEffect, useState } from 'react';
import { AutoScrollActivator, closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@wix/wix-style-react-incubator/dnd-kit/core';
import { rectSortingStrategy, SortableContext, } from '@wix/wix-style-react-incubator/dnd-kit/sortable';
import { restrictToWindowEdges } from '@wix/wix-style-react-incubator/dnd-kit/modifiers';
import { useCollectionContext } from '../CollectionContext';
import { observer } from 'mobx-react-lite';
import { sortableGridKeyboardCoordinates } from './sortableGridKeyboardCoordinates';
import { DragAndDropAnnouncements } from '../DragAndDrop/DragAndDropAnnouncements';
import { usePageContext } from '@wix/bex-core/react';
function _GridSortableContext(props) {
    const { state: grid, children, onSubmit } = props;
    const collection = useCollectionContext();
    const { modalsContainerRef } = usePageContext();
    const { result: { keyedItems }, } = collection;
    const state = grid.collectionDragAndDropState;
    const pointerSensor = useSensor(PointerSensor, {
        activationConstraint: state.dnd.activationConstraint,
    });
    const [coordinateGetter] = useState(() => sortableGridKeyboardCoordinates({ containerDistanceThreshold: 0.1 }));
    const keyboardSensor = useSensor(KeyboardSensor, {
        keyboardCodes: state.dnd.keyboardCodes,
        coordinateGetter,
    });
    // in jsdom we mock drag-and-drop by setting a custom events to draggable elements
    const sensors = useSensors(...(process.env.NODE_ENV === 'test' ? [] : [pointerSensor, keyboardSensor]));
    useEffect(() => state.init(), []);
    state.dnd.onSubmit = onSubmit;
    return (React.createElement(DndContext, { sensors: sensors, autoScroll: {
            activator: AutoScrollActivator.DraggableRect,
            freeze: true,
            acceleration: 4,
            threshold: {
                y: 0.01,
                x: 0.2,
            },
        }, accessibility: {
            container: modalsContainerRef.current,
            announcements: state.dnd.nullAnnouncements,
            screenReaderInstructions: {
                draggable: '',
            },
            restoreFocus: false,
        }, collisionDetection: closestCenter, modifiers: [restrictToWindowEdges], cancelDrop: (ev) => state.dnd.beforeDrop(ev), onDragStart: (ev) => {
            state.dnd.onDragStart(ev);
        }, onDragMove: (ev) => {
            state.dnd.onDragMove(ev);
        }, onDragEnd: (ev) => {
            state.dnd.onDragEnd(ev);
        }, onDragCancel: () => {
            state.dnd.onDragCancel();
        }, onDragOver: (ev) => {
            state.dnd.onDragOver(ev);
        } },
        React.createElement(SortableContext, { items: keyedItems, strategy: rectSortingStrategy },
            children,
            React.createElement(DragAndDropAnnouncements, { state: state.dnd, dataHook: "grid-dnd-live-region" }))));
}
export const GridSortableContext = observer(_GridSortableContext);
//# sourceMappingURL=GridSortableContext.js.map