import React, { useEffect, useRef } from "react";
import { useViewer } from "react-kinesis-webrtc";
import { Loader } from "@aws-amplify/ui-react";


export default function WebRTCViewer({configProps}) {
    // const { accessKeyId, secretAccessKey, sessionToken } = async () => await Auth.currentCredentials();
    const videoRef = useRef();
    
    const {
        error,
        peer: { media } = {},
    } = useViewer(configProps);
    
    // Assign the peer media stream to a video source
    useEffect(() => {        
        if (videoRef.current) {
            videoRef.current.srcObject = media;
        }
    }, [media, videoRef]);
    
    // Display an error
    if (error) {
        return <p>An error occurred: {error.message}</p>;
    }

    if (!(media && media.active)) {
        return <Loader 
        size="large"
        variation="linear"
        filledColor="orange"
        paddingTop={150}
        maxWidth={300}
       />;
    }
    
    // Display the peer media stream
    return <video text-align={"center"} autoPlay ref={videoRef} />;
}