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() {
		return new Promise(resolve => {
			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);
				}

				resolve();
			}, this.TRANSITION_TIME);
		});
	}
}