import { createRoot } from 'react-dom/client';
import { SlotFillProvider } from '@wordpress/components';

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

/**
 * Render site analytics
 */
document.addEventListener(
	'DOMContentLoaded',
	() => {
		const el = document.getElementById( 'growthstack-settings' );
		if ( el ) {
			const args = JSON.parse( el.dataset.args || '{}' );
			const root = createRoot( el );
			root.render(
				<SlotFillProvider>
					<Settings
						cookieConsentPluginActive={ args.cookieConsentPluginActive }
						formsPageUrl={ args.formsPageUrl }
						lianaAutomationChannels={ args.lianaAutomationChannels }
						lianaAutomationConnected={
							args.lianaAutomationConnected
						}
						lianaAutomationEndpoint={ args.lianaAutomationEndpoint }
						lianaAutomationSettings={ args.lianaAutomationSettings }
						lianaMailerConnected={ args.lianaMailerConnected }
						lianaMailerEndpoint={ args.lianaMailerEndpoint }
						lianaMailerSettings={ args.lianaMailerSettings }
						migrationEndpoint={ args.migrationEndpoint }
						migrationStatus={ args.migrationStatus }
					/>
					<Notice />
				</SlotFillProvider>
			);
		}
	},
	false
);