import type { Directive } from 'vue'
import type { DraggableOptions } from './useDraggable'
import { useDraggable } from './useDraggable'

export const vDraggable: Directive<HTMLElement, DraggableOptions> = {
	mounted(el, binding) {
		const { initDraggableContainer } = useDraggable(binding.value || {})
		initDraggableContainer(el)
	},
	updated(el, binding) {
		// Only reinitialize if options changed
		if (binding.value !== binding.oldValue) {
			const { initDraggableContainer } = useDraggable(binding.value || {})
			initDraggableContainer(el)
		}
	}
}