import { createRoot } from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import DashboardApp from './App/DashboardApp';
import SettingsApp from './App/SettingsApp';
import ZoomUsersApp from './App/ZoomUsersApp';
import ZoomReportsApp from './App/ZoomReportsApp';
import ZoomRecordingsApp from './App/ZoomRecordingsApp';
import AddonApp from './App/AddonApp';
import IntegrationApp from './App/IntegrationApp';
import PluginDashboardApp from './App/PluginDashboardApp';
import { MhubAdminProvider } from './App/MhubAdminContext';

document.addEventListener(
	'DOMContentLoaded', function () {
		var rootElementDashboard = document.getElementById('meeting_hub_admin_dasboard');
		var rootElementLmsDashboard = document.getElementById('meetingHub_lms_dashboard');
		var rootElementDokanDashboard = document.getElementById('mhub_dokan_dasboard');
		var rootElementWcfmDashboard = document.getElementById('mhub_wcfm_dasboard');
		var rootMultivendorXDashboard = document.getElementById('mhub_multivendorX_dasboard');
		const rootElementSettings = document.getElementById('meeting_hub_admin_settings');
		const rootElementZoomUsers = document.getElementById('meetinghub_zoom_users');
		const rootElementZoomReports = document.getElementById('meetinghub_zoom_reports');
		const rootElementZoomRecordings = document.getElementById('meetinghub_zoom_recordings');
		const rootElementAddons = document.getElementById('meetingHub_addons');
		const rootElementIntegrations = document.getElementById('meetingHub_integrations');
		const rootElementPluginDashboard = document.getElementById('meetinghub_plugin_dashboard');
		const rootFrontendMeeting = document.getElementById('mhub_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 (mhubMeetingsData.active) {
				DokanDashboardRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}> <DashboardApp /></HashRouter>);
			}
		}

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

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

		if (rootMultivendorXDashboard) {
			const MultivendorXDashboard = createRoot(rootMultivendorXDashboard);
			if (mhubMeetingsData.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 (mhubMeetingsData.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 }}>
					<MhubAdminProvider>
						<SettingsApp />
					</MhubAdminProvider>
				</HashRouter>
			);
		}

		if (rootElementZoomUsers) {
			const usersRoot = createRoot(rootElementZoomUsers);
			usersRoot.render(<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}><ZoomUsersApp /></HashRouter>);
		}

		if (rootElementZoomReports) {
			const reportsRoot = createRoot(rootElementZoomReports);
			reportsRoot.render(
				<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
					<MhubAdminProvider>
						<ZoomReportsApp />
					</MhubAdminProvider>
				</HashRouter>
			);
		}

		if (rootElementZoomRecordings) {
			const reportsRoot = createRoot(rootElementZoomRecordings);
			reportsRoot.render(
				<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
					<MhubAdminProvider>
						<ZoomRecordingsApp />
					</MhubAdminProvider>
				</HashRouter>
			);
		}

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

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

		if (rootElementPluginDashboard) {
			const pluginDashboardRoot = createRoot(rootElementPluginDashboard);
			pluginDashboardRoot.render(
				<HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
					<MhubAdminProvider>
						<PluginDashboardApp />
					</MhubAdminProvider>
				</HashRouter>
			);
		}

	}
);

