util

/**
 * Generic reusable modal dialog container for plugins and interactive tools.
 * Callers provide a title and a content element, wire up the content themselves,
 * and the container clears the content when the dialog closes.
 */

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

/**
 * Handle returned by openPluginDialog.
 * @typedef {Object} PluginDialogHandle
 * @property {function(): void} close - Closes the dialog programmatically.
 * @property {HTMLElement|null} content - The mounted content element, or null if the dialog is unavailable.
 * @property {HTMLElement|null} meta - Header slot element (e.g. for a countdown), or null if unavailable.
 */

/**
 * Opens the generic plugin dialog with the given title and content.
 * The content element is mounted into the dialog and cleared when it closes.
 * The dialog closes via the x button, Escape, or clicking outside it.
 * @param {string} title - Dialog title.
 * @param {HTMLElement} content - Content element to mount; wiring is up to the caller.
 * @param {function(void): void} [onClose] - Called when the dialog closes (by user or close()).
 * @returns {PluginDialogHandle} Handle with close(), the mounted content element, and the meta slot.
 */
export function openPluginDialog(title, content, onClose = null) {
	const overlay = getEl('id-plugin-dialog-overlay');
	const titleEl = getEl('id-plugin-dialog-title');
	const contentEl = getEl('id-div-plugin-dialog-content');
	const metaEl = getEl('id-plugin-dialog-meta');
	const closeBtn = getEl('btn-plugin-dialog-close');

	if (!overlay || !titleEl || !contentEl || !metaEl || !closeBtn) {
		console.warn('Plugin dialog markup missing from index.php');
		return { close: () => {}, content: null, meta: null };
	}

	titleEl.textContent = title || '';
	contentEl.innerHTML = '';
	if (content) {
		contentEl.appendChild(content);
	}

	const close = openModal(overlay, {
		click_outside: true,
		on_close: () => {
			closeBtn.onclick = null;
			contentEl.innerHTML = '';
			metaEl.innerHTML = '';
			if (typeof onClose === 'function') {
				onClose();
			}
		}
	});

	closeBtn.onclick = close;

	return {
		close: close,
		content: content,
		meta: metaEl
	};
}