var curAction = "wait";
var previousAction = "wait"
var startTime = new Date();
var curTime = new Date();
var timeMS = 0;
var FlagMilisecond = 1;
var timer = document.getElementById("stopwatch").getElementsByClassName("timer")[0];

tick();

// NOT OPTIMIZED, place in start switch
var t = setInterval(tick, 10);

const sleep = ms => new Promise(r => setTimeout(r, ms));

async function Stopwatch(action) {
  switch (action) {
    case "start":
      console.log("start function started");
      if (previousAction == "start") { break; }
      startTime = new Date();
      curAction = "increase";
      tick();
      previousAction = "start";
      document.getElementById("start-cro").style.color = "greenyellow";
      document.getElementById("start-cro").style.borderTopColor = "greenyellow";
      document.getElementById("start-cro").style.borderLeftColor = "greenyellow";
      await sleep(200);
      document.getElementById("start-cro").style.color = "grey";
      document.getElementById("start-cro").style.borderTopColor = "grey";
      document.getElementById("start-cro").style.borderLeftColor = "grey";
      break;
    case "stop":
      curAction = "stop";
      tick();
      previousAction = "stop";
      document.getElementById("stop-cro").style.color = "red";
      document.getElementById("stop-cro").style.borderTopColor = "red";
      document.getElementById("stop-cro").style.borderLeftColor = "red";
      await sleep(200);
      document.getElementById("stop-cro").style.color = "white";
      document.getElementById("stop-cro").style.borderTopColor = "white";
      document.getElementById("stop-cro").style.borderLeftColor = "white";
      document.getElementById("start-cro").style.color = "white";
      document.getElementById("start-cro").style.borderTopColor = "white";
      document.getElementById("start-cro").style.borderLeftColor = "white";
      break;

    default:
      // console.error("no action (old script)");
      break;
  }
}

function updateMsec() {
  timer.getElementsByClassName("msec")[0].innerHTML = getDigits(Math.floor((timeMS / 10) % 100), 2);
}

function updateSec() {
  timer.getElementsByClassName("sec")[0].innerHTML = getDigits(Math.floor((timeMS / 1000) % 60), 2);
}

function updateMin() {
  timer.getElementsByClassName("min")[0].innerHTML = getDigits(Math.floor((timeMS / 1000 / 60) << 0), 2);
}


function getDigits(str, num) {
  return ("0" + str).slice(-num);
}

function tick() {
  switch (curAction) {
    case "increase":
      curTime = new Date();
      timeMS = (curTime.getTime() - startTime.getTime());
      if (FlagMilisecond) {
        updateMsec();
      }
      updateSec();
      updateMin();
      break;
    case "stop":
      timer.getElementsByClassName("min")[0].innerHTML = "00";
      timer.getElementsByClassName("sec")[0].innerHTML = "00";
      timer.getElementsByClassName("msec")[0].innerHTML = "00";
      curAction = "wait";
      previousAction = "stop"
      break;
    default:
      // console.error("no action (old script)");
      break;
  }
}

function toggleTimerMsec() {
  let chx = document.getElementById("chx-timerMsec");
  if (chx.checked) {
    FlagMilisecond = 1;
    timer.getElementsByClassName("msec")[0].style.display = "flex";
    document.getElementById("stopwatch-msec-dot").style.display = "flex";
  } else {
    FlagMilisecond = 0;
    timer.getElementsByClassName("msec")[0].style.display = "none";
    document.getElementById("stopwatch-msec-dot").style.display = "none";
  }
  tick();
}