"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDroppable = void 0;
var react_1 = require("react");
var utilities_1 = require("@dnd-kit/utilities");
var useDndContext_1 = require("./useDndContext");
var useDroppable = function (props) {
    var _a = (0, useDndContext_1.useDndContext)(), droppableNodesRef = _a.droppableNodesRef, onDragOver = _a.onDragOver;
    var _b = (0, react_1.useState)(null), element = _b[0], setElement = _b[1];
    var onChangeElem = (0, react_1.useCallback)(function (newElement) {
        if (newElement) {
            newElement.setAttribute('data-test-dnd-drop-id', props.id);
            setElement(newElement);
        }
    }, [props.id]);
    var _c = (0, utilities_1.useNodeRef)(onChangeElem), node = _c[0], setNodeRef = _c[1];
    var data = (0, react_1.useRef)(props.data);
    (0, react_1.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]);
    (0, react_1.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
    };
};
exports.useDroppable = useDroppable;
