import deepar from "https://esm.sh/deepar";
import AgoraRTC from "https://esm.sh/agora-rtc-sdk-ng";

const licenseKey = "your_license_key_goes_here"; // create project and license key at developer.deepar.ai, set domain to cdpn.io

/*
- Sign up on Agora.
- Create a project and get the App ID.
- Generate a temp RTC token. Get the token and the channel name associated with it.
*/
const appId = "**appId**";
const token = "**token**";
const channel = "**channel name**";

// Log the version. Just in case.
console.log("Deepar version: " + deepar.version);
console.log("Agora version: " + AgoraRTC.VERSION);

(async function () {
  // Get the element you want to place DeepAR into. DeepAR will inherit its width and height from this and fill it.
  const previewElement = document.getElementById("ar-screen");

  const effectUrls = [
    "https://s3.eu-west-1.amazonaws.com/demo.deepar.ai/assets/background-replacement-stars/background-replacement-stars.deepar",
    "https://s3.eu-west-1.amazonaws.com/demo.deepar.ai/assets/cracked-porcelain-face/cracked-porcelain-face.deepar",
    "https://s3.eu-west-1.amazonaws.com/demo.deepar.ai/assets/cute-virtual-pet/cute-virtual-pet.deepar"
  ];

  // Initialize DeepAR with an effect file.
  let deepAR;
  try {
    deepAR = await deepar.initialize({
      licenseKey: licenseKey,
      previewElement,
      effect: effectUrls[0]
    });
  } catch (error) {
    console.error(error);
    return;
  }

  const remotePlayerContainer = document.getElementById("subscriber");

  // Agora
  var cameraVideoProfile = "480p_4"; // 640 × 480 @ 30fps  & 750kbs

  let agoraEngine = new AgoraRTC.createClient({ mode: "rtc", codec: "vp9" });

  var remoteStreams = {};
  var mainStreamId;

  agoraEngine.on("user-published", async (user, mediaType) => {
    await agoraEngine.subscribe(user, mediaType);
    user["type"] = mediaType;
    let remoteAudioTrack, remoteVideoTrack;
    let remoteId = user.uid;

    if (mediaType == "video") {
      remoteAudioTrack = user.audioTrack;
      remoteVideoTrack = user.videoTrack;
      if ($("#full-screen-video").is(":empty")) {
        // first remote, set as main stream
        remoteStreams[remoteId] = user;
        mainStreamId = remoteId;
        remoteVideoTrack.play("full-screen-video");
      } else {
        // add as mini view
        agoraEngine.setRemoteVideoStreamType(user.uid, 1); // subscribe to the low stream
        addRemoteStreamMiniView(user);
      }
    }
    if (mediaType == "audio") {
      remoteAudioTrack = user.audioTrack;
      // Play the remote audio track. No need to pass any DOM element.
      remoteAudioTrack.play();
    }
    console.log("Subscribe remote stream successfully: " + remoteId);
  });
  agoraEngine.on("user-unpublished", (user) => {
    console.log(user.uid + " has left the channel");
    var streamId = user.uid; // the the stream id
    if (remoteStreams[streamId] != undefined) {
      delete remoteStreams[streamId]; // remove stream from list
      if (streamId == mainStreamId) {
        var streamIds = Object.keys(remoteStreams);
        if (streamIds.length == 0) {
          return;
        }
        var randomId = streamIds[Math.floor(Math.random() * streamIds.length)]; // select from the remaining streams
        var remoteContainerID = "#" + randomId + "_container";
        $(remoteContainerID).empty().remove(); // remove the stream's miniView container
        remoteStreams[randomId].videoTrack.play("full-screen-video"); // play the random stream as the main stream
        mainStreamId = randomId; // set the new main remote stream
      } else {
        var remoteContainerID = "#" + streamId + "_container";
        $(remoteContainerID).empty().remove(); //
      }
    }
  });

  function addRemoteStreamMiniView(user) {
    var streamId = user.uid;
    // append the remote stream template to #remote-streams
    $("#remote-streams").append(
      $("<div/>", {
        id: streamId + "_container",
        class: "remote-stream-container col"
      }).append(
        $("<div/>", { id: "agora_remote_" + streamId, class: "remote-video" })
      )
    );
    user.videoTrack.play("agora_remote_" + streamId);
    user.audioTrack.play();
    remoteStreams[streamId] = user;

    var containerId = "#" + streamId + "_container";
    $(containerId).dblclick(function () {
      // play selected container as full screen - swap out current full screen stream
      remoteStreams[mainStreamId].videoTrack.stop(); // stop the main video stream playback
      addRemoteStreamMiniView(remoteStreams[mainStreamId]); // send the main video stream to a container
      $(containerId).empty().remove(); // remove the stream's miniView container
      remoteStreams[streamId].videoTrack.stop(); // stop the container's video stream playback
      remoteStreams[streamId].videoTrack.play("full-screen-video"); // play the remote stream as the full screen video
      mainStreamId = streamId; // set the container stream id as the new main stream id
    });
  }

  await agoraEngine.join(appId, channel, token);

  const canvas = deepAR.getCanvas();

  const canvasContext = canvas.getContext("webgl2"); // If this is not called, captureStream() throws on Firefox.
  const outputStream = canvas.captureStream(30);
  let videoTrack = outputStream.getVideoTracks()[0];
  let localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
  let localVideoTrack = AgoraRTC.createCustomVideoTrack({
    mediaStreamTrack: videoTrack
  });
  agoraEngine.publish([localVideoTrack, localAudioTrack]);

  // Off screen rendering when tab is not in focus
  let visible = true;
  document.addEventListener("visibilitychange", function (event) {
    visible = !visible;
    if (!visible) {
      deepAR.setOffscreenRenderingEnabled(true);
    } else {
      deepAR.setOffscreenRenderingEnabled(false);
    }
  });

  // Change effect button
  let effectIndex = 0;
  const changeEffectButton = document.getElementById("change-effect-button");
  changeEffectButton.onclick = async function () {
    changeEffectButton.disabled = true;
    effectIndex = (effectIndex + 1) % effectUrls.length;
    await deepAR.switchEffect(effectUrls[effectIndex]);
    changeEffectButton.disabled = false;
  };
})();