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';

/**
 * Selector matching all overlays that depend on the shared backdrop.
 * @type {string}
 */
const BACKDROP_OVERLAYS_SELECTOR = [
	'.div-structure-dialog-overlay.active',
	'.div-diagram-overlay.active',
	'.div-code-overlay.active',
	'.div-table-overlay.active',
	'.div-notes-overlay.active'
].join(', ');

/**
 * 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(BACKDROP_OVERLAYS_SELECTOR);

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

/**
 * Opens a modal overlay and wires the dismissal behaviour the dialogs would
 * otherwise hand-roll: an Escape handler, an optional click-on-overlay close,
 * and a cleanup callback that runs once when the modal closes by any path.
 * Single source for modal chrome — see confirm-dialog.js, multi-choice-dialog.js
 * and plugin-dialog.js for the usage pattern.
 * @param {HTMLElement|string} overlay - The overlay element or its ID.
 * @param {object} [options=null] - Behaviour options.
 * @param {string} [options.display='flex'] - CSS display style for the overlay.
 * @param {Function|null} [options.on_escape=null] - Called on Escape; return
 *   false to keep the modal open, true or undefined to close it.
 * @param {boolean} [options.click_outside=false] - Close when the overlay
 *   itself (not its content) is clicked.
 * @param {Function|null} [options.on_close=null] - Called once after the modal
 *   is closed via Escape, the click-outside path, or close().
 * @returns {Function} close() — closes the modal idempotently.
 */
export function openModal(overlay, options = null) {
	const el = typeof overlay === 'string' ? getEl(overlay) : overlay;
	if (!el) return () => {};
	const { display = 'flex', on_escape = null, click_outside = false, on_close = null } = options || {};
	let closed = false;

	const finish = () => {
		if (closed) return;
		closed = true;
		window.removeEventListener('keydown', on_key);
		el.removeEventListener('click', on_click);
		if (el.classList.contains('active')) {
			hideOverlay(el);
		}
		on_close?.();
	};

	const on_key = (e) => {
		if (e.key !== 'Escape') return;
		if (on_escape && on_escape() === false) return;
		finish();
	};

	const on_click = (e) => {
		if (e.target === el) finish();
	};

	window.addEventListener('keydown', on_key);
	if (click_outside) {
		el.addEventListener('click', on_click);
	}
	showOverlay(el, display);
	return finish;
}