const socketUrl =
  (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
  window.location.host +
  "/ws";

let socket = new WebSocket(socketUrl);

socket.addEventListener("message", function (event) {
  if (event.data.startsWith("u:")) {
    const items = event.data.split(";");
    items.forEach((i) => {
      const parts = event.data.split(":");
      document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
      console.log("box-" + parts[1]);
    });
    return;
  }

  if (event.data.startsWith("i:")) {
    const str = event.data.split("i:")[1];
    const items = str.split(";");
    if (items.length === 0) {
      return;
    }
    document.querySelectorAll("input").forEach((input) => {
      input.checked = false;
    });
    items.forEach((i) => {
      if (!i) {
        return;
      }
      console.log(i, document.getElementById("box-" + i));
      document.getElementById("box-" + i).checked = true;
    });
    return;
  }
});

setInterval(() => {
  socket.send("ping");
}, 10000);

document.querySelectorAll(".boxes input").forEach((input) => {
  input.addEventListener("change", (event) => {
    if (socket.readyState !== socket.OPEN) {
      socket = new WebSocket(socketUrl);
    }
    const id = event.target.id.split("-")[1];
    const value = event.target.checked ? "+" : "-";
    socket.send("u:" + id + ":" + value);
  });
});

var timer = null
document.querySelector("#auto-boxes").addEventListener("change",(e)=>{
    if (e.target.checked){
        timer = setInterval(()=>{
            var id = Math.round(Math.random() * 1000)
            const value = document.querySelector('#box-'+id).checked ? "-" : "+";
            socket.send("u:" + id + ":" + value);
        },500)
    }else{
        clearInterval(timer)
    }
})