import { createRoot } from '@wordpress/element';
import { App } from '../app/App';
import { boot } from '../shared/lib/boot';
import '../styles/index.scss';

const MOUNT_ELEMENT_ID = 'link-checkup-root';

function renderApp( mountPoint: HTMLElement ): void {
	createRoot( mountPoint ).render( <App /> );
}

function start(): void {
	const host = document.getElementById( MOUNT_ELEMENT_ID );

	if ( host?.shadowRoot !== null ) {
		return;
	}

	const shadow = host.attachShadow( { mode: 'open' } );
	const mountPoint = document.createElement( 'div' );

	if ( boot.cssUrl === '' ) {
		shadow.append( mountPoint );
		renderApp( mountPoint );

		return;
	}

	const stylesheet = document.createElement( 'link' );
	const renderOnce = () => {
		renderApp( mountPoint );
	};

	stylesheet.rel = 'stylesheet';
	stylesheet.href = boot.cssUrl;
	stylesheet.addEventListener( 'load', renderOnce, { once: true } );
	stylesheet.addEventListener( 'error', renderOnce, { once: true } );
	shadow.append( stylesheet, mountPoint );
}

if ( document.readyState === 'loading' ) {
	document.addEventListener( 'DOMContentLoaded', start );
} else {
	start();
}