import { createRoot } from 'react-dom/client';

import Dashboard from './Dashboard';
import Notice from '../shared/Notice';

/**
 * Render site analytics
 */
document.addEventListener(
	'DOMContentLoaded',
	() => {
		const el = document.getElementById( 'growthstack-dashboard' );
		if ( el ) {
			const args = JSON.parse( el.dataset.args || '{}' );
			const root = createRoot( el );
			root.render(
				<>
					<Dashboard
						endpointDashboard={ args.endpointDashboard }
						assetsFolder={ args.assetsFolder }
						migrationEndpoint={ args.migrationEndpoint }
						migrationStatus={ args.migrationStatus }
						urlAnalytics={ args.urlAnalytics }
						urlABTesting={ args.urlABTesting }
						urlPersonalization={ args.urlPersonalization }
						urlForms={ args.urlForms }
						urlSettings={ args.urlSettings }
						urlSupport={ args.urlSupport }
					/>
					<Notice />
				</>
			);
		}
	},
	false
);
