const box = document.querySelector<HTMLDialogElement>( '[data-printblob-pro-box]' );

if ( box ) {
	const title = box.querySelector<HTMLElement>( '[data-printblob-pro-box-title]' );
	const text = box.querySelector<HTMLElement>( '[data-printblob-pro-box-text]' );
	const buy = box.querySelector<HTMLAnchorElement>( '[data-printblob-pro-box-buy]' );

	document.addEventListener( 'click', ( event ) => {
		const target = event.target instanceof Element ? event.target : null;
		const control = target?.closest<HTMLElement>( '[data-printblob-pro-name]' );
		if ( control && title && text && buy ) {
			event.preventDefault();
			title.textContent = control.dataset.printblobProName ?? '';
			text.textContent = control.dataset.printblobProText ?? '';
			buy.href = control.dataset.printblobProHref ?? buy.href;
			box.showModal();
			return;
		}
		if ( target === box || target?.closest( '[data-printblob-pro-box-close]' ) ) {
			box.close();
		}
	} );
}