import classNames from "classnames";
import React, { CSSProperties } from "react";
import { ReactNode } from "react";
import { DropTargetMonitor, useDrag, useDrop } from "react-dnd";
import './index.less'

type WrapperType = 'default' | 'tr';

interface Iprops<T> {
    children?: ReactNode
    className?: string
    onItemDrop?: (value: T) => void
    accept?: string[] | string
    style?: CSSProperties
    canDrop?: boolean
    canDrag?: boolean
    nodeType: WrapperType
    dragType?: string
    value?: T
}

function DroppableWrapper<T, >({
    children,
    className,
    onItemDrop,
    accept,
    style,
    canDrop,
    canDrag,
    nodeType,
    dragType,
    value,
    ...restProps}: Iprops<T>) {
    const ref = React.useRef();

    const [{ isDragging }, drager] = useDrag({
        type: dragType || 'default',
        item: value,
        collect: monitor => ({
            isDragging: !!monitor.isDragging(),
        }),
        canDrag: _ => {
            return canDrag
        }
    })

    const [collectProps, droper] = useDrop({
        accept: accept || 'default',
        collect: (monitor: DropTargetMonitor) => {
            monitor.getItem();
            return {
                isOver: monitor.isOver(),
            }
        },
        canDrop: (monitor: DropTargetMonitor) => {
            if (canDrop != null) return canDrop;
            return monitor.canDrop();
        },
        drop: (item: T) => {
            if (onItemDrop) {
                onItemDrop(item);
            }
        }
    })
    
    droper(drager(ref));

    if (nodeType === 'tr') {
        return (
            <tr
            ref={ref}
            className={`${className} ${classNames({
                'will-drop': collectProps.isOver && canDrop,
                'can-drag': canDrag,
                'droppable-wrapper-tr': true,
                // 'ant-table-row-selected': selected,
            })}`}
            style={{ cursor: 'move', opacity: isDragging ? 0.5 : 1, }}
            {...restProps} 
            >
                {children}
            </tr>
        )
    }

    if (nodeType === 'default') {
        return (
            <div 
            ref={ref}
            style={style}
            className={classNames(
                className,
                {
                    'will-drop': collectProps.isOver && canDrop,
                    'droppable-wrapper': true,
                    'can-drag': canDrag,
                }
            )}
            {...restProps}
            >
                {children}
            </div>
        )
    }
    return null;
}
DroppableWrapper.defaultProps = {
    canDrop: true,
    // nodeType: 'default'
}

export default DroppableWrapper;