import { useCallback, useEffect, useRef, useState } from 'react';
export var useDrop = function (props) {
    if (props === void 0) { props = {}; }
    var onDrop = props.onDrop;
    var droppableRef = useRef(null);
    var overRef = useRef(false);
    var timerId = useRef(undefined);
    var _a = useState(false), isDraggable = _a[0], setIsDraggable = _a[1];
    var clearTimer = useCallback(function () {
        timerId.current && clearTimeout(timerId.current);
    }, []);
    var handleDragOver = useCallback(function (event) {
        event.preventDefault();
        setIsDraggable(true);
        clearTimer();
        timerId.current = setTimeout(function () {
            overRef.current = false;
            setIsDraggable(false);
        }, 200);
    }, [clearTimer]);
    var preventDefault = useCallback(function (event) {
        event.preventDefault();
        event.stopPropagation();
    }, []);
    var handleDrop = useCallback(function (event) {
        preventDefault(event);
        setIsDraggable(false);
        overRef.current = false;
        onDrop === null || onDrop === void 0 ? void 0 : onDrop(event);
    }, [preventDefault, onDrop]);
    useEffect(function () {
        var ref = droppableRef.current;
        if (!ref) {
            return;
        }
        ref.addEventListener('dragenter', preventDefault);
        ref.addEventListener('dragleave', preventDefault);
        ref.addEventListener('dragover', handleDragOver);
        ref.addEventListener('drop', handleDrop);
        return function () {
            ref.removeEventListener('dragenter', preventDefault);
            ref.removeEventListener('dragleave', preventDefault);
            ref.removeEventListener('dragover', handleDragOver);
            ref.removeEventListener('drop', handleDrop);
        };
    }, [handleDrop, handleDragOver, preventDefault]);
    return { isDraggable: isDraggable, ref: droppableRef };
};
//# sourceMappingURL=useDrop.js.map