const seenMessages = new Set();
const seenDataAnnounceMessages = new Set();
let awaitingTimes = [];
let messages = [];
let startTime = 0;

async function init() {
  const data = await chrome.storage.local.get(['startTime', 'messages']);
  if (data?.startTime > 0) {
    startTime = data.startTime;
  }
  if (data.messages) {
    messages = data.messages;
  }
  checkNewMessages();
  update();
}

function dis(n) {
  if (n < 10) return "0" + n;
  return n.toString();
}

function displayTime(rawTime) {
  if (rawTime < 3600) return `${dis(Math.floor((rawTime % 3600) / 60))}:${dis(rawTime % 60)}`;
  return `${Math.floor(rawTime / 3600)}:${dis(Math.floor((rawTime % 3600) / 60))}:${dis(rawTime % 60)}`;
}

function checkNewMessages() {
  // Check announce messages and log their appearing times.
  const announceMessageElements = document.querySelectorAll("div[data-announce-message]");
  for (let e of announceMessageElements) {
    if (seenDataAnnounceMessages.has(e)) continue;
    seenDataAnnounceMessages.add(e);
    const completionTime = Math.floor((Date.now() - startTime) / 1000);
    awaitingTimes.push(completionTime);
  }

  // Check in-call messages.
  const messageElements = document.querySelectorAll("div[data-message-id] div[jscontroller]");
  let newElements = false;
  for (let e of messageElements) {
    if (seenMessages.has(e)) continue;
    newElements = true;
    seenMessages.add(e);
    let completionTime = Math.floor((Date.now() - startTime) / 1000);

    // If awaiting times are available, use them first (i.e. the messages section just got opened).
    if (awaitingTimes.length) completionTime = awaitingTimes.shift();

    const messageNode = e.parentNode.parentNode.parentNode.parentNode;
    const rootNode = messageNode.parentNode.parentNode;
    const name = rootNode.firstChild.firstChild.innerHTML;
    const dTime = displayTime(completionTime);
    if (startTime > 0) {
      messages.push({completionTime: completionTime, name: name, text: e.innerHTML, displayTime: dTime});
    
      // Set timeout for rendering the completion time, required to avoid weird stuff.
      setTimeout(() => {
        e.innerHTML = `(<span style="color: red;">${dTime}</span>) ${e.innerHTML}`;
      }, 20);
    }
  }
  
  if (newElements) {
    chrome.storage.local.set({ messages: messages });
  }

  // If awaiting messages are still present, but the messages section is opened with no new messages,
  // delete all awaiting messages (that should never happen though, there was an error somewhere).
  if (messageElements.length && awaitingTimes.length) awaitingTimes = [];

  setTimeout(checkNewMessages, 100);
}

async function update() {
  const data = await chrome.storage.local.get(['startTime', 'endTime']);
  if (data?.startTime >= 0 && data.startTime != startTime) {
    startTime = data.startTime;
    messages = [];
  }
  setTimeout(update, 2000);
}

setTimeout(init, 20);