const socket = io();

const params = new URLSearchParams(location.search);
const roomId = params.get("room");
const name = params.get("name");

document.getElementById("roomTitle").innerText = "Room: " + roomId;

let peers = {};
let channels = {};

socket.emit("join-room", { roomId, name });

socket.on("user-joined", ({ id }) => {
  createPeer(id, true);
});

socket.on("signal", async ({ from, data }) => {
  if (!peers[from]) createPeer(from, false);

  if (data.sdp) {
    await peers[from].setRemoteDescription(data.sdp);
    if (data.sdp.type === "offer") {
      const answer = await peers[from].createAnswer();
      await peers[from].setLocalDescription(answer);
      socket.emit("signal", { to: from, data: { sdp: peers[from].localDescription } });
    }
  }

  if (data.candidate) {
    await peers[from].addIceCandidate(data.candidate);
  }
});

function createPeer(id, initiator) {
  const peer = new RTCPeerConnection({
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
  });

  if (initiator) {
    const channel = peer.createDataChannel("chat");
    setupChannel(id, channel);
  } else {
    peer.ondatachannel = (e) => {
      setupChannel(id, e.channel);
    };
  }

  peer.onicecandidate = (e) => {
    if (e.candidate) {
      socket.emit("signal", { to: id, data: { candidate: e.candidate } });
    }
  };

  peers[id] = peer;

  if (initiator) {
    peer.createOffer().then(offer => {
      peer.setLocalDescription(offer);
      socket.emit("signal", { to: id, data: { sdp: offer } });
    });
  }
}

function setupChannel(id, channel) {
  channels[id] = channel;

  channel.onmessage = (e) => {
    addMessage("Peer", e.data);
  };
}

function send() {
  const msgInput = document.getElementById("msg");
  const msg = msgInput.value;
  addMessage("Me", msg);

  for (let id in channels) {
    channels[id].send(msg);
  }
  msgInput.value = "";
}

function addMessage(sender, text) {
  const chat = document.getElementById("chat");
  chat.innerHTML += `<p><b>${sender}:</b> ${text}</p>`;
  chat.scrollTop = chat.scrollHeight;
}