import { createRoot } from '@wordpress/element';
import AnalyticsSync from './components/AnalyticsSync/AnalyticsSync';
import ArchivedDataFilter from './components/ArchivedDataFilter/ArchivedDataFilter';

// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', function() {
    // Render Analytics Sync component
    const container = document.getElementById('archm-analytics-sync-container-wrap');
    
    if (container) {
        const root = createRoot(container);
        root.render(<AnalyticsSync />);
    }

    // Render Archived Data Filter component
    // Get localized data from WordPress
    if (typeof archmAnalytics !== 'undefined') {
        const filterContainer = document.createElement('div');
        filterContainer.id = 'archm-archived-data-filter-mount';
        document.body.appendChild(filterContainer);
        
        const filterRoot = createRoot(filterContainer);
        filterRoot.render(
            <ArchivedDataFilter 
                restUrl={archmAnalytics.restUrl}
                nonce={archmAnalytics.nonce}
                syncEnabled={archmAnalytics.syncEnabled}
                ajaxUrl={archmAnalytics.ajaxUrl}
            />
        );
    }
});
