import { useCallback, useEffect, useRef, useState } from 'react';
import { useNodeRef } from '@dnd-kit/utilities';
import { useDndContext } from './useDndContext';
export var useDroppable = function (props) {
    var _a = useDndContext(), droppableNodesRef = _a.droppableNodesRef, onDragOver = _a.onDragOver;
    var _b = useState(null), element = _b[0], setElement = _b[1];
    var onChangeElem = useCallback(function (newElement) {
        if (newElement) {
            newElement.setAttribute('data-test-dnd-drop-id', props.id);
            setElement(newElement);
        }
    }, [props.id]);
    var _c = useNodeRef(onChangeElem), node = _c[0], setNodeRef = _c[1];
    var data = useRef(props.data);
    useEffect(function () {
        droppableNodesRef.current.set(props.id, { id: props.id, data: data, node: node });
        return function () {
            var node = droppableNodesRef.current.get(props.id);
            if (node) {
                droppableNodesRef.current.delete(props.id);
            }
        };
    }, [props.id]);
    useEffect(function () {
        if (!element) {
            return;
        }
        var onMouseOver = function (event) {
            if (element === event.target) {
                onDragOver(props.id);
            }
        };
        element.addEventListener('mouseover', onMouseOver);
        return function () {
            element.removeEventListener('mouseover', onMouseOver);
        };
    }, [element, onDragOver, props.id]);
    return {
        setNodeRef: setNodeRef
    };
};
