// NearDiv.tsx
import { useEffect, useRef } from 'react';
import { nearManager } from './nearManager';
import React from 'react';
import useDrop from 'ahooks/lib/useDrop/useDrop';
import './global.less'

interface Props {
    index: number
    onDrop: (key: string, index: number, e: React.DragEvent<Element>) => void;
}

const NearDiv: React.FC<Props> = ({ index, onDrop }) => {
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!ref.current) return;

        nearManager.register(ref.current);

        return () => {
            nearManager.unregister(ref.current);
        };
    }, []);

    const [dropProps] = useDrop({
        onDom: (key, e) => {
            onDrop(key, index, e);
        }
    });

    return (
        <div
            ref={ref}
            className="comptCon near-item near-hidden"
            {...dropProps}
        >请拖至此处</div>
    );
}

export default React.memo(NearDiv)