import h from '../Util/DomUtil.js';
import { clamp } from '../Util/Util.js';

class DraggableWindow {
	constructor(title) {
		this.div = h('div', { 'class': 'draggable-window', 'style': 'position: absolute; z-index: 9' });
		this.header = h('div', title, { 'class': 'draggable-header', 'style': 'cursor: move; z-index: 10' });
		this.div.appendChild(this.header);

		this.lastPosition = { x: 0, y: 0 };
		this.position = { x: 0, y: 0 };

		this.div.addEventListener('mousedown', e => {
			if (e.button != 0) return;
			e.preventDefault();
			this.position = {
				x: this.div.offsetLeft,
				y: this.div.offsetTop,
			};
			this.lastPosition = {
				x: e.clientX,
				y: e.clientY,
			};
			document.onmousemove = e => {
				const dx = e.clientX - this.lastPosition.x;
				const dy = e.clientY - this.lastPosition.y;

				this.position.x += dx;
				this.position.y += dy;

				this.lastPosition = {
					x: e.clientX,
					y: e.clientY,
				};
				
				this.div.style.left = `${clamp(this.position.x, 0, window.innerWidth-20)}px`;
				this.div.style.top = `${clamp(this.position.y, 0, window.innerHeight-20)}px`;
			};
			document.onmouseup = () => {
				document.onmousemove = null;
				document.onmouseup = null;
			};
		});

		document.body.appendChild(this.div);
	}

	appendChild(element) {
		this.div.appendChild(element);
	}

	setTitle(title) {
		this.header.textContent = title;
	}
}

export default DraggableWindow;