import React, { useEffect } from 'react';

import { DyteProvider, useDyteClient } from '../src';
import Meeting from './components/Meeting';
import Participants from './components/Participants';
import Chat from './components/Chat';

const roomName = 'avbigx-hemnqy';

function App() {
	const [client, loadClient] = useDyteClient();

	useEffect(() => {
		fetch('https://api.cluster.dyte.in/auth/anonymous')
			.then((res) => res.json())
			.then((data) => {
				const { authToken } = data;
				loadClient({
					roomName,
					authToken,
					defaults: { video: false, audio: false },
				});
			});
	}, []);

	Object.assign(window, { client });

	return (
		<DyteProvider value={client}>
			<Meeting />
			<Participants />
			<Chat />
		</DyteProvider>
	);
}

export default App;