const ROOT_ID = 'ac-modal-root';

export function getModalRoot(): HTMLElement {
	let root = document.getElementById(ROOT_ID);
	if (!root) {
		root = document.createElement('div');
		root.id = ROOT_ID;
		document.body.appendChild(root);
	}
	return root;
}

export function buildDialogHTML(options: {
	title?: string;
	showClose: boolean;
	size: string;
	className?: string;
}): HTMLElement {
	const wrapper = document.createElement('div');
	wrapper.className = 'ac-modal';

	const sizeClass = `ac-modal__dialog--${options.size}`;
	const extraClass = options.className ? ` ${options.className}` : '';

	let headerHTML = '';
	if (options.title || options.showClose) {
		const titleHTML = options.title
			? `<h3 class="ac-modal__title">${escapeHTML(options.title)}</h3>`
			: '<span></span>';
		const closeHTML = options.showClose
			? `<button type="button" class="ac-modal__close" aria-label="Close">
				<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>
			</button>`
			: '';
		headerHTML = `<div class="ac-modal__header">${titleHTML}${closeHTML}</div>`;
	}

	wrapper.innerHTML = `
		<div class="ac-modal__backdrop"></div>
		<div class="ac-modal__dialog ${sizeClass}${extraClass}" role="dialog" aria-modal="true">
			${headerHTML}
			<div class="ac-modal__body"></div>
		</div>
	`;

	return wrapper;
}

function escapeHTML(str: string): string {
	const div = document.createElement('div');
	div.textContent = str;
	return div.innerHTML;
}