new Vue({
  el: "#app",
  data: {
    files: [],
    index: 0,
    interval: null,
    carouselTimeout: 20000,
    carouselActive: true,
    videoSrc: null,
  },
  methods: {
    next: function () {
      if (this.index + 1 < this.files.length) {
        this.index++;
      } else {
        this.index = 0;
      }
      // force video src reload
      this.videoSrc = null;
      setTimeout(() => {
        if (this.files[this.index].mime.includes('video')) {
          this.videoSrc = '/files/'+this.files[this.index].basename;
        }
      }, 100)
    },
    nextClick: function () {
      this.next();
      this.startCarousel();
    },
    prev: function () {
      if (this.index - 1 >= 0) {
        this.index--;
      } else {
        this.index = this.files.length - 1;
      }
      // force video src reload
      setTimeout(() => {
        if (this.files[this.index].mime.includes('video')) {
          this.videoSrc = '/files/'+this.files[this.index].basename;
        }
      }, 100)
    },
    prevClick: function () {
      this.next();
      this.startCarousel();
    },
    loadData: function () {
      fetch('api/files').then(response => response.json()).then(
        data => {
          this.files = data.resource;
          this.startCarousel();
        }
      )
    },
    startCarousel: function (time = this.carouselTimeout) { 
      this.carouselActive = true;     
      clearInterval(this.interval);
      this.interval = setInterval(this.next, time);
    },
    stopCarousel: function () {      
      this.carouselActive = false;
      clearInterval(this.interval);
    },
    toggleCarousel: function () {
      if (this.carouselActive) {
        this.stopCarousel();
      } else {
        this.startCarousel();
      }
    }
  },
  mounted() {
    this.loadData();
  }
})