/*
 * https://frontendeval.com/questions/countdown-timer
 *
 * Create a countdown timer that notifies the user
 */

let hourState = 0;
let minuteState = 0;
let secondState = 0;

const startBtn = document.getElementById("start");
const resetBtn = document.getElementById("reset");
const pauseBtn = document.getElementById("pause");
const resumeBtn = document.getElementById("resume");

const timerInputContainer = document.getElementById("timer-input-container");
const timerDisplayContainer = document.getElementById(
  "timer-display-container"
);

const hourInput = document.getElementById("hour");
const minuteInput = document.getElementById("minute");
const secondInput = document.getElementById("second");

const hourDisplay = document.getElementById("hour-display");
const minuteDisplay = document.getElementById("minute-display");
const secondDisplay = document.getElementById("second-display");

const onChangeInput = (e, inputElem) => {
  inputElem.value = e.target.value;
};

hourInput.addEventListener("input", (e) => {
  onChangeInput(e, hourInput);
});

minuteInput.addEventListener("input", (e) => {
  onChangeInput(e, minuteInput);
});

secondInput.addEventListener("input", (e) => {
  onChangeInput(e, secondInput);
});

let intervalId;

const displayValue = (value) => {
  let valueStr = `${value}`;

  if (value < 10) {
    valueStr = `0${valueStr}`;
  }

  return valueStr;
};

const handleDisplayValue = () => {
  hourDisplay.textContent = displayValue(hourState);
  minuteDisplay.textContent = displayValue(minuteState);
  secondDisplay.textContent = displayValue(secondState);
};

const handleCountDown = () => {
  if (hourState > 0) {
    if (minuteState === 0 && secondState === 0) {
      hourState--;
      minuteState = 60;
    }
  }

  if (minuteState > 0) {
    if (secondState === 0) {
      minuteState--;
      secondState = 60;
    }
  }

  secondState--;
};

const handleReset = () => {
  hourInput.value = "";
  minuteInput.value = "";
  secondInput.value = "";

  hourState = 0;
  minuteState = 0;
  secondState = 0;
};

const handleTimesUp = () => {
  if (hourState === 0 && minuteState === 0 && secondState === 0) {
    clearInterval(intervalId);
    setTimeout(() => {
      if (window.confirm("Time is up!")) {
        timerDisplayContainer.classList.add("hidden");
        timerInputContainer.classList.remove("hidden");
      } else {
        timerDisplayContainer.classList.add("hidden");
        timerInputContainer.classList.remove("hidden");
      }

      handleReset();
    }, 0);
  }
};

const intervalCallback = () => {
  handleCountDown(hourState, minuteState, secondState);
  handleDisplayValue();
  handleTimesUp();
};

startBtn.addEventListener("click", () => {
  timerDisplayContainer.classList.remove("hidden");
  timerInputContainer.classList.add("hidden");

  hourState = Number(hourInput.value);
  minuteState = Number(minuteInput.value);
  secondState = Number(secondInput.value);

  handleDisplayValue();

  intervalId = setInterval(() => intervalCallback(), 1000);
});

pauseBtn.addEventListener("click", () => {
  pauseBtn.classList.add("hidden");
  resumeBtn.classList.remove("hidden");

  clearInterval(intervalId);
});

resumeBtn.addEventListener("click", () => {
  pauseBtn.classList.remove("hidden");
  resumeBtn.classList.add("hidden");

  intervalId = setInterval(() => intervalCallback(), 1000);
});

resetBtn.addEventListener("click", () => {
  clearInterval(intervalId);

  timerDisplayContainer.classList.add("hidden");
  timerInputContainer.classList.remove("hidden");

  handleReset();
});