import React, { PropsWithChildren } from 'react'
import { JitsiMeeting } from "@jitsi/react-sdk";

class Meeting extends React.Component {
    render() {
        return (
            <JitsiMeeting
                roomName={this.props.meetingId}
                getIFrameRef={handleJitsiIFrameRef2}
                configOverwrite={{
                    e2ee: {
                        externallyManagedKey: true
                    }
                }}
                onApiReady={externalApi => {
                    externalApi.on("videoConferenceJoined", async (event) => {
                        let secretKey = new Uint8Array(Buffer.from(this.props.secretKeyBase64, 'base64'));
                        let index = 0;

                        let key = await window.crypto.subtle.importKey(
                            "raw",
                            secretKey,
                            "AES-GCM",
                            true,
                            ["encrypt", "decrypt"]
                        );

                        await externalApi.setMediaEncryptionKey({
                            key,
                            index
                        }).then(() => {
                            console.log("SET MEDIA ENCRYPTION KEY");
                        });

                        setTimeout(() => {
                            externalApi.toggleE2EE(true);
                        }, 1_000);

                        console.log('Jitsi Meet External API', externalApi);
                    })
                }}
            />
        )
    }
}

const handleJitsiIFrameRef2 = (iframeRef) => {
    iframeRef.style.marginTop = '10px';
    iframeRef.style.border = '10px #df486f';
    iframeRef.style.padding = '5px';
    iframeRef.style.height = '50em';
};

export default Meeting;