import Blacklight from 'blacklight-frontend'

(function($){
  var Slideshow = function (element, options) {
    this.$element = $(element);
    this.options  = options;
    this.paused   = false;
    this.activeIndex = 0;

    this.init = function() {
      this.$items = this.$element.find('.item');
    }

    this.attachEvents();
    this.init();
  }


  Slideshow.prototype = {

    slide: function(item) {
      var $item     = $(item),
          $frame    = $item.find('.frame'),
          marginTop = 0;

      this.$items.hide();
      $item.show();

      marginTop = Math.round($item.height() - $frame.height())/2;
      this.activeIndex = this.$items.index(item);

      if (this.options.autoPlay && !this.paused) this.play();

      return this;
    },

    play: function() {
      this.paused = false;

      if (this.interval) clearInterval(this.interval);
      this.interval = setInterval($.proxy(this.next, this), this.options.interval);
    },

    pause: function() {
      this.paused = true;
      this.interval = clearInterval(this.interval);

      return this;
    },

    startAt: function(pos) {
      this.to(pos);
    },

    next: function() {
      return this.to('next');
    },

    to: function(pos) {
      if (pos === 'next') pos = this.activeIndex + 1;
      if (pos === 'prev') pos = this.activeIndex - 1;

      return this.slide(this.$items[this.getValidIndex(pos)]);
    },

    getValidIndex: function(index) {
      if (typeof index === 'undefined' || index > (this.$items.length - 1)) index = 0;
      if (index < 0) index = this.$items.length - 1;

      return index;
    },

    attachEvents: function() {
      var $img = this.$element.find('.frame img'),
          _this = this;

      $(document).on('click', '[data-behavior="pause-slideshow"]', function(e) {
        e.preventDefault();

        _this.pause();
      });

      $(document).on('click', '[data-behavior="start-slideshow"]', function(e) {
        e.preventDefault();

        _this.play();
      });

      $(document).on('click', '[data-slide], [data-bs-slide], [data-slide-to], [data-bs-slide-to]', function(e) {
        e.preventDefault();

        const pos = parseInt($(this).attr('data-slide-to') || $(this).attr('data-bs-slide-to'), 10) ||
                $(this).attr('data-slide') ||
                $(this).attr('data-bs-slide');

        if (pos === 'next' || pos === 'prev') _this.pause();
        _this.to(pos);
      });

      // pause slideshow on modal close
      $('#slideshow-modal').on('hidden.bs.modal', function() {
        _this.pause();
      });
    }
  }


  Slideshow.DEFAULTS = {
    autoPlay: false,
    interval: 5000 // in milliseconds
  }


  $.fn.slideshow = function(option) {
    return this.each(function() {
      var $this = $(this);
      var data  = $this.data('slideshow');
      var options = $.extend({}, Slideshow.DEFAULTS, $this.data(), typeof option == 'object' && option);

      if (!data) $this.data('slideshow', (data = new Slideshow(this, options)));
    })
  }

})(jQuery);


Blacklight.onLoad(function() {
  $('.documents-slideshow').slideshow();
});