import { Component, Util } from '@web/state'

let _mouseMoverMoving = false
let _mouseMoverPos = {}
let _mouseMoverEvents = {}

export const MouseMover = {
	start: (event, { onmousemove, onmouseup }) => {
		_mouseMoverPos = { x: event.clientX, y: event.clientY, w: 0, h: 0 }
		_mouseMoverEvents = { onmousemove, onmouseup }
		_mouseMoverMoving = true
	},
}
globalThis.MouseMover = MouseMover

if (typeof document !== 'undefined') {
	document.addEventListener('mouseup', event => {
		if (!_mouseMoverMoving) return
		_mouseMoverMoving = false
		_mouseMoverEvents.onmouseup?.({ event, ..._mouseMoverPos })
	})
	document.addEventListener('mousemove', event => {
		if (!_mouseMoverMoving) return
		_mouseMoverPos.w = event.clientX - _mouseMoverPos.x
		_mouseMoverPos.h = event.clientY - _mouseMoverPos.y
		_mouseMoverEvents.onmousemove?.({ event, ..._mouseMoverPos })
	})
}

Component.register('Resizer', container => {
	const isVertical = container.hasAttribute('vertical')
	const min = parseInt(container.getAttribute('min')) || 10
	const max = parseInt(container.getAttribute('max')) || 1000
	const target = container.target || container.previousElementSibling
	const getSize = (startSize, w, h) => {
		const newSize = startSize + (isVertical ? h : w)
		return newSize < min ? min : newSize > max ? max : newSize
	}
	container.addEventListener('mousedown', event => {
		const startSize = isVertical ? target.offsetHeight : target.offsetWidth
		MouseMover.start(event, {
			onmousemove: ({ w, h }) => target.style[isVertical ? 'height' : 'width'] = getSize(startSize, w, h) + 'px',
			onmouseup: ({ w, h }) => container.dispatchEvent(new CustomEvent('resize', { detail: { oldSize: startSize, newSize: getSize(startSize, w, h) }, bubbles: false })),
		})
	})
}, Util.makeDom(/*html*/`
<div $class="border-\${this.isVertical?'top':'start'}" $style="\${this.isVertical?'height':'width'}:3px;cursor:\${this.isVertical?'row-resize':'col-resize'}"></div>
`))