import { useEffect } from 'react';
import type { MutableRefObject } from 'react';
import { isTagTransferEvent } from '../features/tagging/tagTransfer';

interface UseWorkspaceDragDropArgs {
    shellRef: MutableRefObject<HTMLElement | null>;
}

const useWorkspaceDragDrop = ({
    shellRef,
}: UseWorkspaceDragDropArgs) => {

    useEffect(() => {
        const host = shellRef.current;
        if (!host) {
            return;
        }

        // Allow drop on workspace
        const handleTagDragOver = (event: DragEvent) => {
            if (!isTagTransferEvent(event)) {
                return;
            }

            event.preventDefault();
            if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
        };

        // Use bubbling (false) so children can stopPropagation
        host.addEventListener('dragover', handleTagDragOver, false);

        return () => {
            host.removeEventListener('dragover', handleTagDragOver, false);
        };
    }, [shellRef]);

    return {};
};

export default useWorkspaceDragDrop;
