import { globalState } from '../../app/global-state';

export class ModalStackingPatch {
	static initModalStacking() {
		if (globalState.__backdropFixInitialized == true) {
			return;
		}

		globalState.__backdropFixInitialized = true;

		// Bootstrap 5 dispatches show.bs.modal / hidden.bs.modal as native DOM events
		// on the modal element, so we delegate via document.addEventListener. Use
		// closest('.modal') rather than e.target.matches('.modal') so the filter mirrors
		// jQuery's `.on(event, '.modal', handler)` semantics: walk up from e.target to
		// find the matching ancestor. In practice BS5 always dispatches on the modal
		// element itself, but closest() is robust if that ever changes.
		document.addEventListener('show.bs.modal', (e) => {
			const target = (e.target as Element | null)?.closest('.modal') as HTMLElement | null;
			if (target == null) {
				return;
			}

			let highestZ = 0;
			document.querySelectorAll<HTMLElement>('.modal.show').forEach((el) => {
				const zi = el.style.zIndex;
				if (zi != null && zi.length > 0) {
					const numZi = Number(zi);
					if (numZi > highestZ && numZi > 1049) {
						highestZ = numZi;
					}
				}
			});

			if (highestZ < 1049) {
				highestZ = 1049;
			}

			const zIndex = highestZ + 2;
			target.style.zIndex = String(zIndex);
			setTimeout(() => {
				document.querySelectorAll<HTMLElement>('.modal-backdrop:not(.modal-stack)').forEach((el) => {
					el.style.zIndex = String(zIndex - 1);
					el.classList.add('modal-stack');
				});
			}, 0);
		});

		document.addEventListener('hidden.bs.modal', (e) => {
			const target = (e.target as Element | null)?.closest('.modal') as HTMLElement | null;
			if (target == null) {
				return;
			}

			target.style.zIndex = '';
		});
	}
}