// globals
let cdTimer;
let orgValues;
let timerPaused = false;

// Helper functions
const notify = () => {
  const msg = "Timer ended";
  if (!("Notification" in window)) {
    alert(msg);
    return;
  }
  if (Notification.permission === "granted") {
    const notification = new Notification(msg);
  } else if (Notification.permission === "denied") {
    alert(msg);
  } else {
    Notification.requestPermission().then((permission) => {
      if (permission === "granted") {
        const notification = new Notification(msg);
      }
    });
  }
};

const displayTimer = (h, m, s) => {};
const countdown = () => {
  let { hours: h, mins: m, secs: s } = getValues();

  if (h === 0 && m === 0 && s === 0) {
    clearInterval(cdTimer);
    // notify timer end
    console.log("==== TIMER END ====");
    clearTimer();
    notify();
    return;
  }
  if (s === 0) {
    if (h > 0) {
      if (m === 0) {
        h--;
        m = 60;
      }
    }
    s = 60;
    m--;
  }
  s--;

  displayValues(h, m, s);
  document.getElementById("hh").value = h;
  document.getElementById("mm").value = m;
  document.getElementById("ss").value = s;
};

const getValues = () => {
  const hours = document.getElementById("hh").value
    ? Number(document.getElementById("hh").value)
    : 0;
  const mins = document.getElementById("mm").value
    ? Number(document.getElementById("mm").value)
    : 0;
  const secs = document.getElementById("ss").value
    ? Number(document.getElementById("ss").value)
    : 0;
  return { hours, mins, secs };
};

const displayValues = (h, m, s) => {
  let hh, mm, ss;
  hh = String(h).padStart(2, "0");
  mm = String(m).padStart(2, "0");
  ss = String(s).padStart(2, "0");

  document.getElementById("dh").innerText = hh;
  document.getElementById("dm").innerText = mm;
  document.getElementById("ds").innerText = ss;
};

const startTimer = () => {
  const entryBox = document.querySelector(".entry-box");
  const displayBox = document.querySelector(".display-box");
  orgValues = getValues();
  const { hours, mins, secs } = orgValues;
  displayValues(hours, mins, secs);

  entryBox.classList.remove("box");
  entryBox.classList.add("hidden");
  displayBox.classList.add("box");
  displayBox.classList.remove("hidden");
  cdTimer = setInterval(countdown, 1000);
};

const resetTimer = () => {
  const entryBox = document.querySelector(".entry-box");
  const displayBox = document.querySelector(".display-box");
  console.log(" ------ resetting timer  ------");
  if (cdTimer) clearInterval(cdTimer);
  const { hours, mins, secs } = orgValues;
  document.getElementById("hh").value = hours;
  document.getElementById("mm").value = mins;
  document.getElementById("ss").value = secs;
  displayValues(hours, mins, secs);

  entryBox.classList.add("box");
  entryBox.classList.remove("hidden");
  displayBox.classList.add("hidden");
};

const clearTimer = () => {
  const entryBox = document.querySelector(".entry-box");
  const displayBox = document.querySelector(".display-box");
  console.log(" ------ clearing timer  ------");
  if (cdTimer) clearInterval(cdTimer);
  document.getElementById("hh").value = "";
  document.getElementById("mm").value = "";
  document.getElementById("ss").value = "";
  // displayValues(hours, mins, secs);

  entryBox.classList.add("box");
  entryBox.classList.remove("hidden");
  displayBox.classList.add("hidden");
};

const toggleTimer = () => {
  timerPaused = timerPaused === true ? false : true;
  const pauseButton = document.querySelector(".pause-btn");
  if (timerPaused) {
    pauseButton.textContent = "Resume";
    clearInterval(cdTimer);
  } else {
    pauseButton.textContent = "Pause";
    cdTimer = setInterval(countdown, 1000);
  }
};

document.addEventListener(
  "DOMContentLoaded",
  function () {
    // Elements
    const startButton = document.querySelector(".start-btn");
    const resetButton = document.querySelector(".reset-btn");
    const pauseButton = document.querySelector(".pause-btn");

    // Events
    startButton.addEventListener("click", startTimer);
    resetButton.addEventListener("click", resetTimer);
    pauseButton.addEventListener("click", toggleTimer);
  },
  false
);