import { JitsiMeeting } from "@jitsi/react-sdk";
import { JITSI_DOMAIN } from "../../background/constants";
import { UserInfo } from "./types";

interface Props {
    roomName: string;
    userInfo: UserInfo;
}

function JitsiEntrypoint({ roomName, userInfo }: Props) {
    return (
        <JitsiMeeting
            domain={JITSI_DOMAIN}
            roomName={roomName}
            configOverwrite={{
                startWithAudioMuted: true,
                disableModeratorIndicator: true,
                startScreenSharing: true,
                enableEmailInStats: false,
                prejoinConfig: { enabled: false },
            }}
            interfaceConfigOverwrite={{}}
            userInfo={userInfo}
            onApiReady={(externalApi) => {
                // here you can attach custom event listeners to the Jitsi Meet External API
                // you can also store it locally to execute commands
            }}
            getIFrameRef={(iframeRef) => {
                iframeRef.style.height = "100%";
                iframeRef.style.width = "100%";
            }}
        />
    );
}

export default JitsiEntrypoint;