/*
	Author: Jeremy Espinosa
	Filename: slick.js
	Description: This is to initialize the slick carousel and pass options on it
	Dependencies:
		- slick-carousel
	How to use:
		1. Call the utils by doing this
		2. B2C.slick.init({}) and pass an object to override the default options
*/

;(function($) {
  "use strict"

  B2C.slick = {
    init: function(option) {
      // initialize the slick carousel

      this._default = {
        target: ".js-banner-slick",
        prevArrowClass: ".slick-arrow--prev",
        nextArrowClass: ".slick-arrow--next",
        config: {
          infinite: true, //continuesly loop through the sliders
          fade: false, //disabled the fade transition effects
          cssEase: "linear",
          autoplay: true, //automatically next the slide
          dots: true, //shows the meatballs -- but will be hidden on tablet up (via scss)
          prevArrow: '<div class="slick-arrow slick-arrow--prev"></div>', //custom prev arrow
          nextArrow: '<div class="slick-arrow slick-arrow--next"></div>', //custom next arrow
          speed: 750, //speed in miliseconds when triggering next and prev
          pauseOnHover: true, //when on hover the slider will stop from automatically playing
          autoplaySpeed: 6000 //delay when auto next,
        }
      }

      this._option = $.extend(true, this._default, option)

      this.setConfig(this)

      this._option.config.onload()

      // initialize the slick using the pass options
      $(this._option.target)
        .not(".slick-initialized")
        .slick(this._option.config)

      this.eventListener()
    },

    eventListener: function() {
      const self = this
      $(this._option.target).on("beforeChange", function(
        e,
        slick,
        currentSlide,
        nextSlide
      ) {
        self._option.config.onBeforeChange(
          self,
          e,
          slick,
          currentSlide,
          nextSlide
        )
      })
    },

    onload: function() {
      // default onload function
    },

    onBeforeChange: function(self, e, slick, currentSlide, nextSlide) {
      // default before on change function
    },

    setConfig: function(self) {
      // use the default if there is no pass callback
      if (self._option.config.onload === undefined)
        self._option = $.extend(true, self._option, {
          config: {
            onload: function() {
              self.onload()
            }
          }
        })

      if (self._option.config.onBeforeChange === undefined)
        self._option = $.extend(true, self._option, {
          config: {
            onBeforeChange: function(self, e, slick, currentSlide, nextSlide) {
              self.onBeforeChange(self, e, slick, currentSlide, nextSlide)
            }
          }
        })
    }
  }
})(jQuery)
