// src/interaction.js
(function(global) {
    const { Component, Util } = global;

    const MouseMover = {
        bind: (handle, target, options = {}) => {
            let isMoving = false
            let startX, startY, startLeft, startTop

            const onMouseDown = (e) => {
                if (options.shouldStart && !options.shouldStart(e)) return
                isMoving = true
                startX = e.clientX
                startY = e.clientY
                const rect = target.getBoundingClientRect()
                startLeft = rect.left
                startTop = rect.top
                document.addEventListener('mousemove', onMouseMove)
                document.addEventListener('mouseup', onMouseUp)
                if (options.onStart) options.onStart(e)
            }

            const onMouseMove = (e) => {
                if (!isMoving) return
                const dx = e.clientX - startX
                const dy = e.clientY - startY
                if (options.axis !== 'y') target.style.left = (startLeft + dx) + 'px'
                if (options.axis !== 'x') target.style.top = (startTop + dy) + 'px'
                if (options.onMove) options.onStart(e)
            }

            const onMouseUp = (e) => {
                isMoving = false
                document.removeEventListener('mousemove', onMouseMove)
                document.removeEventListener('mouseup', onMouseUp)
                if (options.onEnd) options.onEnd(e)
            }

            handle.addEventListener('mousedown', onMouseDown)
            return () => handle.removeEventListener('mousedown', onMouseDown)
        }
    }

    Component.register('Resizer', container => {
        container.style.cursor = container.hasAttribute('vertical') ? 'col-resize' : 'row-resize'
        container.addEventListener('mousedown', e => {
            const target = container.parentElement
            if (!target) return
            const rect = target.getBoundingClientRect()
            const startX = e.clientX
            const startY = e.clientY
            const startW = rect.width
            const startH = rect.height

            const onMouseMove = (e) => {
                const dw = e.clientX - startX
                const dh = e.clientY - startY
                if (container.hasAttribute('vertical')) target.style.width = (startW + dw) + 'px'
                else target.style.height = (startH + dh) + 'px'
                container.dispatchEvent(new CustomEvent('resize', { bubbles: false, detail: { width: target.offsetWidth, height: target.offsetHeight } }))
            }
            const onMouseUp = () => {
                document.removeEventListener('mousemove', onMouseMove)
                document.removeEventListener('mouseup', onMouseUp)
            }
            document.addEventListener('mousemove', onMouseMove)
            document.addEventListener('mouseup', onMouseUp)
        })
    }, Util.makeDom(/*html*/`<div style="position:absolute;right:0;bottom:0;width:10px;height:10px;z-index:100"></div>`))

    global.MouseMover = MouseMover;

})(globalThis);