let focusButton = document.getElementById("focus");
let buttons = document.querySelectorAll(".btn");
let shortBreakButton = document.getElementById("shortbreak");
let longBreakButton = document.getElementById("longbreak");
let startBtn = document.getElementById("btn-start");
let stopBtn = document.getElementById("btn-stop");
let pauseBtn = document.getElementById("btn-pause");
let time = document.getElementById("time");
let set;
let active = focus;
let count = 59;
let paused = true;
let minCount = 24;
time.textContent = `${minCount + 1}:00`;
const appendZero = (value) => {
    value = value < 10 ? `0${value}` : value;
    return value;
};

const stop = () => {
    pause();
        switch (active) {
            case "long":
                minCount = 4;
                break;
            case "short":
                minCount = 24;
                break;
            default:
                minCount = 24;
                break;
        }
        count = 59;
        time.textContent = `${minCount + 1}:00`
};

const pause = () => {
    paused = true;
    clearInterval(set);
    startBtn.classList.remove("hide");
    pauseBtn.classList.remove("show");
    stopBtn.classList.remove("show");
};

stopBtn.addEventListener("click", stop);

const removeFocus = () => {
    buttons.forEach((btn) => {
        btn.classList.remove("btn-focus");
    });
}
focusButton.addEventListener("click", () => {
    removeFocus();
    focusButton.classList.add("btn-focus");
    pause();
    minCount = 24;
    count = 59;
    time.textContent = `${minCount + 1}:00`;
});

shortBreakButton.addEventListener("click", () => {
    active = "short";
    shortBreakButton.classList.add("btn-focus");
    pause();
    minCount = 4;
    count = 59;
    time.textContent = `${appendZero(minCount + 1)}:00`;
});
longBreakButton.addEventListener("click", () => {
    active = "long";
    longBreakButton.classList.add("btn-focus");
    pause();
    minCount = 14;
    count = 59;
    time.textContent = `${minCount + 1}:00`
});
pauseBtn.addEventListener("click", pause);

startBtn.addEventListener("click", () => {
    stopBtn.classList.add("show");
    pauseBtn.classList.add("show");
    startBtn.classList.add("hide");
    startBtn.classList.remove("show");
    if (paused) {
        paused = false;
        time.textContent = `${appendZero(minCount)}:${appendZero(count)}`;
        set = setInterval(() => {
            count--;
            time.textContent = `${appendZero(minCount)}:${appendZero(count)}`;
            if (count == 0) {
                if (minCount != 0) {
                    minCount--;
                    count = 60;
                } else {
                    clearInterval(set);
                }
            }
        }, 1000)
    }
});