// Sunday, February 16 2025, 03:06:20 PM

const dateElement = document.getElementById("date");

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

const daysOfWeek = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

function updateDateTime() {
  const date = new Date();

  const seconds = date.getSeconds();
  const minutes = date.getMinutes();
  const hours24 = date.getHours();
  const hours12 = hours24 % 12;
  const ampm = hours24 > 11 && hours24 != 0 ? "PM" : "AM";
  const secondsString = String(seconds).padStart(2, "0");
  const minutesString = String(minutes).padStart(2, "0");

  const year = date.getFullYear();
  const month = months[date.getMonth()];
  const day = date.getDate();
  const dayOfWeek = daysOfWeek[date.getDay()];

  dateElement.innerText = `${dayOfWeek}, ${month} ${day} ${year}, ${hours12}:${minutesString}:${secondsString} ${ampm}`;
}

updateDateTime();
setInterval(updateDateTime, 1000);



// modified stuff from statusline.js
// TODO combine both functionalities into the same statusline.js
const statusLineElement = document.getElementById("status-line");
const statusLineElement2 = statusLineElement.cloneNode();
statusLineElement2.id = "status-line2";
document.body.appendChild(statusLineElement2);

let status = { blocks: [{ text: "Streamboy is connecting...", color: "#ffffff" }] };
let scroll = 0;

setInterval(() => {
  let string = "";
  for (const i in status.blocks) {
    string += status.blocks[i].text;
    if (i < status.blocks.length - 1) string += "    |    ";
  }

  if (scroll >= string.length + 9) scroll = 0;
  const stringWidth = 16 * string.length + 144;
  if (16 * string.length <= statusLineElement.parentElement.clientWidth) {
    scroll = 0;
    statusLineElement.style.removeProperty("position");
    statusLineElement.style.removeProperty("left");
    statusLineElement2.style.display = "none";
    statusLineElement.textContent = string;
    statusLineElement2.textContent = string;
  } else {
    statusLineElement.style.position = "absolute";
    statusLineElement.style.left = `${-16 * scroll}px`;
    statusLineElement2.style.position = "absolute";
    statusLineElement2.style.left = `${-16 * scroll + stringWidth}px`;
    statusLineElement2.style.removeProperty("display");
    scroll += 1;
    statusLineElement.textContent = string + "    |    ";
    statusLineElement2.textContent = string + "    |    ";
  }
}, 500);

const socket = new WebSocket("ws://localhost:8012");

socket.addEventListener("message", (event) => {
  status = JSON.parse(event.data);
});