import React, { useRef } from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from '../ItemTypes';
import uniqid from '../../../../helpers/uniqid';


const BuilderElementItem = ({ dbId, name, label, move  }) => {
    const ref = useRef(null);

    const [{ isDragging }, drag] = useDrag(() => ({
        type: ItemTypes.FIELD,
        item: () => {
            return { name, dbId, id: uniqid(), index: -1 }
        },
        end: (item, monitor) => {
            const dropResult = monitor.getDropResult()
            if (item && dropResult) {
                return item;
            }
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
            handlerId: monitor.getHandlerId(),
        }),
    }))

    const opacity = isDragging ? 0.4 : 1
    drag(ref);

    return (
        <div ref={ref} className="formBuilder__elementItem" style={{ opacity }}>
            {label}
        </div>
    )
}

export default BuilderElementItem;