document.addEventListener('alpine:init', () => {
  Alpine.data('exercisePlayer', () => {
    return {
      timer: null,
      counter: 0,
      timeLeft: 0,
      currentPosition: 0,
      exercises: [],
      isPaused: false,
      init() {
        this.exercises = window.exerciseData;
      },
      start() {
        if (!this.isPaused) {
          this.timeLeft = this.exercises[this.currentPosition].time;
          this.counter = 0;
        }

        this.timer = setInterval(() => {
          if (this.timeLeft === 0) {
            this.next()
          };
        
          this.counter++;
          this.timeLeft--;
        }, 1000);
      },
      destroy() {
          // Detach the handler, avoiding memory and side-effect leakage
          if (this.timer) {
            clearInterval(this.timer);
          }

          if (!this.isPaused) {
            this.counter = 0;
            this.timeLeft = 0;
          }
      },
      next() {
        this.destroy()
        this.currentPosition++;

        if (this.exercises[this.currentPosition].exercise_type === "Time") {
          this.start()
        }
      },
      previous() {
        this.destroy();
        this.currentPosition--;
      },

      pause() {
        if (this.isPaused) {
          this.start();
          this.isPaused = false;
        } else {
          this.isPaused = true;
          this.destroy()
        }
      }
    }
  })
})