import {
  useJoin,
  useRemoteAudioTracks,
  useRemoteUsers,
  useRemoteVideoTracks,
} from "agora-rtc-react";
import { useEffect, useState } from "react";

import MediaControl from "./MediaControl";
import { VideoCallRoom } from "./VideoCallRoom";
import { appConfig } from "../../utils/const";
import { RenderRemoteUsers } from "./RemoteUsers";
import { VideoCallContainer } from "./VideoCallContainer";
import { useAuth } from "../../contexts/authContext";

interface BasicVideoCallProps {
  isConf: boolean,
  emitIsConf: any
}


export const BasicVideoCall = ({isConf, emitIsConf} : BasicVideoCallProps) => {

  const agoraProps = {
    appId: "d18a08b5b9384c3795a9c0d11c7362b1",
    appCertificate: "38400d36d7484320a4c01881ef0356a8",
    channelName : '1billionminutes',
    uid: 9254,
    generatedToken: "007eJxTYPD+MvX/vWlbEhjiBE7pSzP90rYtWfas14e7+iQj6+9L5QoKDCmGFokGFkmmSZbGFibJxuaWpomWyQYphobJ5sZmRkmGZhP3pzUEMjIw71/NysgAgSA+P4NhUmZOTmZ+Xm5mXmlJajEDAwB0UyKl",
    token: "007eJxTYPgRuOdSlT1zTNuuJJs+6Td/W0IeWV3ZUji/5aa9gvS1da8VGFIMLRINLJJMkyyNLUySjc0tTRMtkw1SDA2TzY3NjJIMJRM2pQnwMTDYrzvJyMjAyMACxCA+E5hkBpMsYJKfoSQvU7egKLEytUi3KD8/l4XB0sjUBAC54SSZ"
  }

  const {userData} = useAuth();
  const [calling, setCalling] = useState(isConf);

  useJoin(
    {appid: agoraProps.appId, channel: agoraProps.channelName, token: agoraProps.generatedToken, uid: userData?.id},
    calling,
  );

  const [micOn, setMic] = useState(true);
  const [cameraOn, setCamera] = useState(true);

  const remoteUsers = useRemoteUsers();
  const { videoTracks } = useRemoteVideoTracks(remoteUsers);
  const { audioTracks } = useRemoteAudioTracks(remoteUsers);
  audioTracks.map(track => track.play());

  useEffect(() => {
    switch (calling) {
      case false:
        emitIsConf(false);
        break;

      case true:
        emitIsConf(true);
        break;
    
      default:
        emitIsConf(false);
        break;
    }
		
	}, [calling]);

  return (
    <VideoCallContainer>

      {calling ? (
        <VideoCallRoom cameraOn={cameraOn} micOn={micOn}
          renderRemoteUsers={() => <RenderRemoteUsers videoTracks={videoTracks} />}
        />
      ) : (
        <VideoCallContainer />
      )}

      <MediaControl
        calling={calling}
        cameraOn={cameraOn}
        micOn={micOn}
        setCalling={() => {
          setCalling(a => !a);
        }}
        setCamera={() => {
          setCamera(a => !a);
        }}
        setMic={() => {
          setMic(a => !a);
        }}
      />
    </VideoCallContainer>
  );
};

export default BasicVideoCall;