CustomDialog.js

class CustomDialog {
	constructor() {
		this.dialog = document.createElement('dialog');
		this.dialog.innerHTML = `
			<article>
				<h2></h2>
				<p></p>
				<ul class="details"></ul>
				<footer>
					<button class="secondary" data-action="cancel">Cancel</button>
					<button data-action="confirm">Confirm</button>
				</footer>
			</article>
		`;
		this.dialog.classList.add('custom-dialog', 'modal-lg');
		document.body.appendChild(this.dialog);
		this.result = null;
		this.inputField = null;

		// Bind event listeners
		this.dialog.addEventListener('click', (event) => {
			if (event.target.dataset.action === 'cancel') {
				this.close(null);
			} else if (event.target.dataset.action === 'confirm') {
				this.close(this.inputField && this.inputField.style.display !== 'none' ? this.inputField.value : true);
			}
		});
	}

	open({ type = 'alert', title = '', message = '', details = [] } = {}) {
		return new Promise((resolve) => {
			this.result = null;
			this.resolve = resolve;

			// Set content
			this.dialog.querySelector('h2').textContent = title || this.capitalizeFirstLetter(type);
			this.dialog.querySelector('p').textContent = message;

			const detailsList = this.dialog.querySelector('.details');
			detailsList.innerHTML = '';
			if (details.length > 0) {
				detailsList.style.display = 'block';
				details.forEach((item) => {
					const li = document.createElement('li');
					li.textContent = item;
					detailsList.appendChild(li);

				});
			} else {
				detailsList.style.display = 'none';
			}

			// Add input field for prompt
			if (type === 'prompt') {
				if (!this.inputField) {
					this.inputField = document.createElement('input');
					this.inputField.type = 'text';
					this.inputField.classList.add('prompt-input');
					this.dialog.querySelector('article').insertBefore(this.inputField, this.dialog.querySelector('footer'));
				}
				this.inputField.style.display = 'block';
				this.inputField.value = '';
				this.inputField.focus();
			} else if (this.inputField) {
				this.inputField.style.display = 'none';
			}

			// Show/hide buttons based on type
			this.dialog.querySelector('[data-action="cancel"]').style.display = type === 'alert' ? 'none' : '';
			this.dialog.querySelector('[data-action="confirm"]').textContent = type === 'prompt' ? 'OK' : 'Confirm';
			this.dialog.showModal();
		});
	}

	close(value) {
		this.dialog.close();
		this.resolve(value);
	}

	capitalizeFirstLetter(string) {
		return string.charAt(0).toUpperCase() + string.slice(1);
	}

	alert({ title, message, details }) {
		return this.open({ type: 'alert', title, message, details });
	}

	confirm({ title, message, details }) {
		return this.open({ type: 'confirm', title, message, details });
	}

	prompt({ title, message, details }) {
		return this.open({ type: 'prompt', title, message, details });
	}
}

// Usage example:
const dialog = new CustomDialog();

// Alert dialog
async function showAlert(message, title = 'Alert') {
	await dialog.alert({
		title: title,
		message: message,
	});
	return true; //console.log('Alert closed');
}

// Confirm dialog
async function showConfirm(message, title = 'Confirm', details = []) {
	const confirmed = await dialog.confirm({
		title: title,
		message: message,
		details: details,
	});
	return confirmed;
}

// Prompt dialog
async function showPrompt(message, title = 'Input') {
	const result = await dialog.prompt({
		title: title,
		message: message,
	});
	return result !== null ? result : false;
}