class Timer {
    constructor(root, myTime) {

        this.el = {
            minutes: root.querySelector(".timer-part-minutes"),
            seconds: root.querySelector(".timer-part-seconds"),
            control: root.querySelector(".timer-btn-control"),
            reset: root.querySelector(".timer-btn-reset")
        };


        this.interval = null;
        this.remainingSeconds = myTime;

        const minutes = Math.floor(this.remainingSeconds / 60);
        const seconds = this.remainingSeconds % 60;

        this.el.minutes.textContent = minutes.toString().padStart(2, "0");
        this.el.seconds.textContent = seconds.toString().padStart(2, "0");

        this.el.control.addEventListener("click", () => {
            if (this.interval == null) {
                this.start();
            }
            else {
                this.stop();
            }
        });

        this.el.reset.addEventListener("click", () => {
            alarm.pause();
            alarm.load();
            this.stop();
            this.remainingSeconds = myTime;
            this.updateInterfaceTime();
        });
    }

    ringAlarm() {
        alarm.play();
    }

    updateInterfaceTime() {
        const minutes = Math.floor(this.remainingSeconds / 60);
        const seconds = this.remainingSeconds % 60;

        this.el.minutes.textContent = minutes.toString().padStart(2, "0");
        this.el.seconds.textContent = seconds.toString().padStart(2, "0");
    }

    updateInterfaceControls() {
        if (this.interval == null) {
            this.el.control.innerHTML = `<span class="material-icons">play_arrow</span>`;
            this.el.control.classList.add("timer-btn-start");
            this.el.control.classList.remove("timer-btn-stop");
        }
        else {
            this.el.control.innerHTML = `<span class="material-icons">pause</span>`;
            this.el.control.classList.add("timer-btn-stop");
            this.el.control.classList.remove("timer-btn-start");
        }
    }

    start() {
        if (this.remainingSeconds == 0) return;
        this.interval = setInterval(() => {
            this.remainingSeconds--;
            this.updateInterfaceTime();

            if (this.remainingSeconds == 0) {
                this.stop();
                this.ringAlarm();
            }
        }, 1000);

        this.updateInterfaceControls();
    }

    stop() {
        clearInterval(this.interval);

        this.interval = null;

        this.updateInterfaceControls();
    }

}

new Timer(
    document.querySelector(".timer"), 5
);