let progressBar = document.querySelector(".zpay-progress");
let length = Math.PI * 2 * 100;
progressBar.style.strokeDasharray = length;
//Gets the value of a query parameter
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
}
function update(value, timePercent) {
  var offset = -length - (length * value) / timePercent;
  progressBar.style.strokeDashoffset = offset;
}
const displayOutput = document.querySelector(".zpay-display-remain-time");
let intervalTimer;
let timeLeft;
let wholeTime = getQueryVariable("timeout") / 1000;
update(wholeTime, wholeTime);
displayTimeLeft(wholeTime);
function changeWholeTime(seconds) {
  if (wholeTime + seconds > 0) {
    wholeTime += seconds;
    update(wholeTime, wholeTime);
  }
}
function timer(seconds) {
  let remainTime = Date.now() + seconds * 1000;
  displayTimeLeft(seconds);
  intervalTimer = setInterval(function() {
    timeLeft = Math.round((remainTime - Date.now()) / 1000);
    if (timeLeft < 0) {
      clearInterval(intervalTimer);
      displayTimeLeft(wholeTime);
      return;
    }
    displayTimeLeft(timeLeft);
  }, 1000);
}
function displayTimeLeft(timeLeft) {
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let displayString = `${minutes < 10 ? "0" : ""}${minutes}:${
    seconds < 10 ? "0" : ""
  }${seconds}`;
  displayOutput.textContent = displayString;
  update(timeLeft, wholeTime);
}
window.onload = timer(wholeTime);