export class WindowManager {
	private static _topmost: HTMLElement | null;

	static get topmost() {
		return this._topmost;
	}

	static set topmost(e) {
		if (this._topmost) {
			this._topmost.style.zIndex = "0";
		}
		this._topmost = e;
		this._topmost.style.display = "block";
		this._topmost.style.zIndex = "1";
	}

	static observe(element) {
		element.addEventListener("mousedown", () => {
			this.topmost = element;
		});

		const titleBar = element.querySelector(".title-bar");

		titleBar.addEventListener("mousedown", startDrag);
		titleBar.addEventListener("touchstart", startDrag, { passive: false });

		function startDrag(e) {
			if (e.target !== titleBar) return;

			let isTouch = e.type.startsWith("touch");
			let startX = isTouch ? e.touches[0].clientX : e.clientX;
			let startY = isTouch ? e.touches[0].clientY : e.clientY;

			let offsetX = startX - element.offsetLeft;
			let offsetY = startY - element.offsetTop;

			function onMove(e) {
				let clientX = isTouch ? e.touches[0].clientX : e.clientX;
				let clientY = isTouch ? e.touches[0].clientY : e.clientY;

				let newX = clientX - offsetX;
				let newY = clientY - offsetY;

				element.style.top = `${newY}px`;
				element.style.left = `${newX}px`;
			}

			function stopMove() {
				let maxX = window.innerWidth - element.offsetWidth;
				let maxY = window.innerHeight - element.offsetHeight;

				let finalX = Math.min(Math.max(element.offsetLeft, 0), maxX);
				let finalY = Math.min(Math.max(element.offsetTop, 0), maxY);

				element.style.top = `${finalY}px`;
				element.style.left = `${finalX}px`;

				document.removeEventListener("mousemove", onMove);
				document.removeEventListener("mouseup", stopMove);
				document.removeEventListener("touchmove", onMove);
				document.removeEventListener("touchend", stopMove);
			}

			document.addEventListener("mousemove", onMove);
			document.addEventListener("mouseup", stopMove);
			document.addEventListener("touchmove", onMove, { passive: false });
			document.addEventListener("touchend", stopMove);
		}
	}
}