import { useEffect, useState } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteMeeting, DyteUIBuilder, generateConfig } from '@dytesdk/react-ui-kit';

type UIConfig = ReturnType<typeof generateConfig>['config'];

function DisableControlsAddonApp() {
	const [meeting, initMeeting] = useDyteClient();
	const [uiConfig, setUIConfig] = useState<UIConfig>();
	const url = new URL(window.location.href);
	const queryToken = url.searchParams.get('authToken')!;

	if (!queryToken) {
		alert('Please add authToken to url query params');
	}

	useEffect(() => {
		const init = async () => {
			initMeeting({
				defaults: { audio: true, video: true },
				authToken: queryToken,
			}).then((meet) => {
				if (!meet) {
					console.log('failed to initialize meeting');
					return;
				}
				const config = generateConfig(meet.self.suggestedTheme, meet).config;
				const builder = new DyteUIBuilder(config);
				const componentsToDisable = ['dyte-mic-toggle', 'dyte-camera-toggle'];
				componentsToDisable.forEach((component) => {
					builder.find('div#setupcontrols-media')?.remove(component);
					builder.find('div#controlbar-center')?.remove(component);
					builder.find('div#controlbar-mobile')?.remove(component);
				});
				setUIConfig(builder.build());
			});
		};
		init();
	}, []);

	if (!meeting) {
		return <div>Loading...</div>;
	}

	return <DyteMeeting meeting={meeting} config={uiConfig} />;
}

export default DisableControlsAddonApp;