import { createRoot } from 'react-dom/client';
import PageAnalytics from '../shared/PageAnalytics';
import SiteAnalytics from './apps/SiteAnalytics';

/**
 * Render page analytics
 */
document.addEventListener(
	'DOMContentLoaded',
	() => {
		const growthstackButtons = Array.from(
			document.getElementsByClassName( 'js-growthstack-show-page-data' )
		);
		const modalNode = document.getElementById(
			'growthstack-page-data-modal'
		);
		if ( modalNode && growthstackButtons.length > 0 ) {
			// React 17 or lower
			const root = createRoot( modalNode );
			root.render( <PageAnalytics buttons={ growthstackButtons } /> );
		}
	},
	false
);

/**
 * Render site analytics
 */
document.addEventListener(
	'DOMContentLoaded',
	() => {
		const el = document.getElementById( 'growthstack-site-analytics' );
		if ( el ) {
			const args = JSON.parse( el.dataset.args );
			const root = createRoot( el );
			root.render(
				<SiteAnalytics
					endpointSiteOverview={ args.endpointSiteOverview }
					endpointSiteAudience={ args.endpointSiteAudience }
					isLianaAutomationActive={
						args.isLianaAutomationActive ?? false
					}
					lianaAdminPageUrl={ args.lianaAdminPageUrl }
					assetsFolder={ args.assetsFolder }
					upgradeUrl={ args.upgradeUrl }
				/>
			);
		}
	},
	false
);