export class UiManager {
	TRANSITION_TIME = 300;

	showSection(section) {
		for (const section of document.getElementsByTagName("section")) {
			this.hideElements(section);
		}

		this.showElements(`#${section}-section`);

		return new Promise(resolve => setTimeout(resolve, this.TRANSITION_TIME * 2));
	}

	hideElements() {
		for (const input of arguments) {
			const elem = input instanceof Element ? input : document.querySelector(input);

			if (getComputedStyle(elem).display === "none")
				continue;

			elem.style.opacity = "0";
			elem.dataset.oldDisplay = getComputedStyle(elem).display;

			setTimeout(() => {
				elem.style.display = "none";
			}, this.TRANSITION_TIME);
		}
	}

	showElements() {
		setTimeout(() => {
			for (const input of arguments) {
				const elem = input instanceof Element ? input : document.querySelector(input);

				elem.style.opacity = "0";

				elem.style.display = elem.dataset.oldDisplay || "block";
				elem.dataset.oldDisplay = null;

				setTimeout(() => {
					elem.style.opacity = "1";
				}, 10);
			}
		}, this.TRANSITION_TIME);
	}
}