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

import MeetingListApp from './App/MeetingListApp';

/**
 * Reads the data-available="yes" attribute from a container element and returns
 * "available" as the type prop value, otherwise returns the provided default.
 *
 * @param {HTMLElement} el           The shortcode container element.
 * @param {string}      defaultType  Fallback type when the attribute is not set.
 * @returns {string}
 */
function resolveType( el, defaultType = '' ) {
	return el.dataset.available === 'yes' ? 'available' : defaultType;
}

document.addEventListener(
	'DOMContentLoaded', function () {
		const rootWebexMeetingList    = document.getElementById( 'mhub_webex_meeting_list' );
		const rootJitsiMeetingList    = document.getElementById( 'mhub_jitsi_meeting_list' );
		const rootZoomMeetingList     = document.getElementById( 'mhub_zoom_meeting_list' );
		const rootZoomWebinarList     = document.getElementById( 'mhub_zoom_webinar_list' );
		const rootGoogleMeetingList   = document.getElementById( 'mhub_google_meet_meeting_list' );
		const rootMsTeamsMeetingList  = document.getElementById( 'mhub_msteams_meeting_list' );

		if ( rootWebexMeetingList ) {
			const webexMeetingListRoot = createRoot( rootWebexMeetingList );
			webexMeetingListRoot.render(
				<HashRouter><MeetingListApp platform="webex" type={ resolveType( rootWebexMeetingList ) } /></HashRouter>
			);
		}

		if ( rootGoogleMeetingList ) {
			const googleMeetingListRoot = createRoot( rootGoogleMeetingList );
			googleMeetingListRoot.render(
				<HashRouter><MeetingListApp platform="google_meet" type={ resolveType( rootGoogleMeetingList ) } /></HashRouter>
			);
		}

		if ( rootJitsiMeetingList ) {
			const jitsiMeetingListRoot = createRoot( rootJitsiMeetingList );
			jitsiMeetingListRoot.render(
				<HashRouter><MeetingListApp platform="jitsi_meet" type={ resolveType( rootJitsiMeetingList ) } /></HashRouter>
			);
		}

		if ( rootZoomMeetingList ) {
			const zoomMeetingListRoot = createRoot( rootZoomMeetingList );
			// Zoom meeting list defaults to type="all"; available="yes" overrides it.
			zoomMeetingListRoot.render(
				<HashRouter><MeetingListApp platform="zoom" meeting_type="2" type={ resolveType( rootZoomMeetingList, 'all' ) } /></HashRouter>
			);
		}

		if ( rootZoomWebinarList ) {
			const zoomWebinarListRoot = createRoot( rootZoomWebinarList );
			zoomWebinarListRoot.render(
				<HashRouter><MeetingListApp platform="zoom" meeting_type="1" type={ resolveType( rootZoomWebinarList ) } /></HashRouter>
			);
		}

		if ( rootMsTeamsMeetingList ) {
			const msTeamsMeetingListRoot = createRoot( rootMsTeamsMeetingList );
			msTeamsMeetingListRoot.render(
				<HashRouter><MeetingListApp platform="msteams" type={ resolveType( rootMsTeamsMeetingList ) } /></HashRouter>
			);
		}

		const rootMsTeamsUpcomingList = document.getElementById( 'mhub_msteams_upcoming_list' );
		if ( rootMsTeamsUpcomingList ) {
			const msTeamsUpcomingListRoot = createRoot( rootMsTeamsUpcomingList );
			msTeamsUpcomingListRoot.render(
				<HashRouter><MeetingListApp platform="msteams" type="upcoming" /></HashRouter>
			);
		}
	}
);

