import { CSSProperties, PropsWithChildren } from 'react'
import { useSortable } from '@dnd-kit/sortable'
import { HandleContext, HandleContextInst } from '@/components/dnd/HandleContext'

interface SortableProps extends PropsWithChildren {
    id: string
    data: ToolMenuItem
    isDelete?: boolean
}

const Sortable = ({ id, data, isDelete, children }: SortableProps) => {
    const {
        attributes,
        isDragging,
        listeners,
        setNodeRef: draggableRef,
        setActivatorNodeRef,
        transform,
        transition
    } = useSortable({
        id,
        data
    })
    const context = useMemo<HandleContext>(
        () => ({
            attributes,
            listeners,
            ref: setActivatorNodeRef
        }),
        [attributes, listeners, setActivatorNodeRef]
    )
    const style: CSSProperties | undefined = transform
        ? {
              opacity: isDragging ? 0.4 : undefined,
              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
              zIndex: 10000,
              transition
          }
        : undefined

    return (
        <HandleContextInst.Provider value={context}>
            <div
                ref={draggableRef}
                style={style}
                className={isDragging && isDelete ? 'delete' : undefined}
            >
                {children}
            </div>
        </HandleContextInst.Provider>
    )
}

export default Sortable