type CheckboxEl = HTMLInputElement & { checked: boolean; id: string };
type Box = {
  id: number;
  value: boolean;
};

(() => {
  const socket = getSocket("/boxes/ws");

  const deserializeBox = (msg: string): Box => {
    msg = msg.replaceAll("b:", "");
    const parts = msg.split(":");

    return {
      id: Number(parts[0]),
      value: parts[1] === "+",
    };
  };

  const handleInstruction = (instruction: string) => {
    if (instruction.startsWith("b:")) {
      const items = instruction.split(";");
      items.forEach((i) => {
        const box = deserializeBox(i);

        const el = document.getElementById("box-" + box.id) as CheckboxEl;
        el.checked = box.value;
        // console.log(i,box,el)
      });
      return;
    }
  };

  socket.addEventListener("message", (event: MessageEvent<string>) => {
    const instructions = event.data.split("\n");
    instructions.forEach(handleInstruction);
  });

  document.querySelectorAll(".boxes input").forEach((input) => {
    input.addEventListener("change", (event) => {
      const target = event.target as CheckboxEl;

      const id = target?.id.split("-")[1];
      const value = target.checked ? "+" : "-";
      socket.send("b:" + id + ":" + value);
    });
  });

  var autoPlayTimer: number | undefined = undefined;
  const handleAutoPlay = (el: CheckboxEl) => {
    if (el.checked) {
      autoPlayTimer = setInterval(() => {
        socket.send("random");
      }, 50);
    } else {
      clearInterval(autoPlayTimer);
    }
  };

  const autoPlayEl = document.querySelector("#auto-boxes") as CheckboxEl;
  handleAutoPlay(autoPlayEl);
  autoPlayEl?.addEventListener("change", (e) =>
    handleAutoPlay(e.target as CheckboxEl)
  );

  var golTimer: number | undefined = undefined;
  const handleGol = (el: CheckboxEl) => {
    if (el.checked) {
      golTimer = setInterval(() => {
        socket.send("gol");
      }, 500);
    } else {
      clearInterval(golTimer);
    }
  };

  const golEl = document.querySelector("#game-of-life") as CheckboxEl;
  handleGol(golEl);
  golEl.addEventListener("change", (e) => handleGol(e.target as CheckboxEl));
})();