util

/**
 * Utility functions for managing full-screen overlay dialogs and shared background backdrop.
 */

import { getEl } from './dom-utils.js';

const BACKDROP_ID = 'id-dialog-backdrop';

/**
 * Gets the shared dialog backdrop element.
 * @returns {HTMLElement|null}
 */
export function getBackdrop() {
	return getEl(BACKDROP_ID);
}

/**
 * Opens a modal overlay with animation and activates the shared backdrop.
 * @param {HTMLElement|string} overlay - The overlay element or its ID.
 * @param {string} [displayStyle='block'] - CSS display style ('block' or 'flex').
 */
export function showOverlay(overlay, displayStyle = 'block') {
	const el = typeof overlay === 'string' ? getEl(overlay) : overlay;
	if (!el) return;

	const backdrop = getBackdrop();
	if (backdrop) {
		backdrop.style.display = 'block';
		void backdrop.offsetWidth;
		backdrop.classList.add('active');
	}

	el.style.display = displayStyle;
	void el.offsetWidth;
	el.classList.add('active');
}

/**
 * Hides a modal overlay with animation and deactivates backdrop if no other overlays are active.
 * @param {HTMLElement|string} overlay - The overlay element or its ID.
 * @param {Function} [onComplete] - Optional callback after closing animation finishes.
 */
export function hideOverlay(overlay, onComplete) {
	const el = typeof overlay === 'string' ? getEl(overlay) : overlay;
	if (!el) return;

	el.classList.remove('active');

	setTimeout(() => {
		if (!el.classList.contains('active')) {
			el.style.display = 'none';
		}
		if (typeof onComplete === 'function') {
			onComplete();
		}
	}, 200);

	const backdrop = getBackdrop();
	const activeOverlays = document.querySelectorAll('.div-structure-dialog-overlay.active');

	if (activeOverlays.length === 0 && backdrop) {
		backdrop.classList.remove('active');
		setTimeout(() => {
			const stillActive = document.querySelectorAll('.div-structure-dialog-overlay.active');
			if (stillActive.length === 0 && backdrop && !backdrop.classList.contains('active')) {
				backdrop.style.display = 'none';
			}
		}, 350);
	}
}