import { createRoot } from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import DashboardApp from './App/DashboardApp';
import SettingsApp from './App/SettingsApp';
import AddonApp from './App/AddonApp';
import IntegrationApp from './App/IntegrationApp';
import { WemeetAdminProvider } from './App/WemeetAdminContext';
import GetProModal from './components/common/GetProModal';

document.addEventListener(
	'DOMContentLoaded', function () {
		var rootElementDashboard        = document.getElementById('wemeet_admin_dasboard');
		var rootElementLmsDashboard     = document.getElementById('wemeet_lms_dashboard');
		var rootElementDokanDashboard   = document.getElementById('wemeet_dokan_dasboard');
		var rootElementWcfmDashboard    = document.getElementById('wemeet_wcfm_dasboard');
		var rootMultivendorXDashboard   = document.getElementById('wemeet_multivendorX_dasboard');
		const rootElementSettings       = document.getElementById('wemeet_admin_settings');
		const rootElementZoomUsers      = document.getElementById('wemeet_zoom_users');
		const rootElementZoomReports    = document.getElementById('wemeet_zoom_reports');
		const rootElementZoomRecordings = document.getElementById('wemeet_zoom_recordings');
		const rootElementAddons         = document.getElementById('wemeet_addons');
		const rootElementIntegrations   = document.getElementById('wemeet_integrations');
		const rootFrontendMeeting       = document.getElementById('wemeet_frontend_meeting');

		if(rootElementDashboard ) {
			const dashboardRoot = createRoot(rootElementDashboard);
			dashboardRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <DashboardApp /></HashRouter>);
		}
		
		if(rootElementDokanDashboard  ) {
			const DokanDashboardRoot = createRoot(rootElementDokanDashboard );
			if( wemeetMeetingsData.active ){
				DokanDashboardRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <DashboardApp /></HashRouter>);
			}
		}

		if(rootElementWcfmDashboard  ) {
			const WcfmDashboardRoot = createRoot(rootElementWcfmDashboard );
			if( wemeetMeetingsData.active ){
				WcfmDashboardRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <DashboardApp /></HashRouter>);
			}
		}

		if(rootMultivendorXDashboard  ) {
			const MultivendorXDashboard = createRoot(rootMultivendorXDashboard );
			if( wemeetMeetingsData.active ){
				MultivendorXDashboard.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <DashboardApp /></HashRouter>);
			}
		}

		if (rootFrontendMeeting) {
			const frontendMeetinRoot = createRoot(rootFrontendMeeting);
			frontendMeetinRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <DashboardApp /></HashRouter>);
		}

		if(rootElementLmsDashboard ) {
			const lmsDashboardRoot = createRoot(rootElementLmsDashboard);
			if( wemeetMeetingsData.active ){
				lmsDashboardRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <DashboardApp /></HashRouter>);
			}
		}

		if (rootElementSettings) {
			const settingsRoot = createRoot(rootElementSettings);
			settingsRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}><SettingsApp /></HashRouter>);
		}


		if (rootElementAddons) {
			const addonsRoot = createRoot(rootElementAddons);
			addonsRoot.render(
				<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
					<WemeetAdminProvider>
						<AddonApp />
						<GetProModal />
					</WemeetAdminProvider>
				</HashRouter>
			);
		}

		if (rootElementIntegrations) {
			const integrationsRoot = createRoot(rootElementIntegrations);
			integrationsRoot.render(
				<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
					<WemeetAdminProvider>
						<IntegrationApp />
						<GetProModal />
					</WemeetAdminProvider>
				</HashRouter>
			);
		}
	
	} 
);

