import React, { useEffect } from 'react';

import { RealtimeKitProvider, useRealtimeKitClient } from '../src';
import Meeting from './components/Meeting';
import Participants from './components/Participants';
import Chat from './components/Chat';

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

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

    Object.assign(window, { client });

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

export default App;