/*
	Author: Thelma Suyam
	Filename: customScrollbar.js
	Description:
	How to use:  
	Note:
*/

;(function($) {
  "use strict"

  B2C.customScroll = {
    init: function(options) {
      this._default = {
        target: ".js-custom-scrollbar",
        config: {
          theme: "minimal-dark",
          mouseWheel: {
            enable: true
          },
          scrollButtons: {
            enable: true
          },
          keyboard: {
            enable: true,
            scrollType: "stepless"
          }
        }
      }
      this._options = $.extend(true, this._default, options)

      if (!$(this._options.target).length) return

      this.setCustomScroll()
    },

    setCustomScroll: function() {
      $(this._options.target).mCustomScrollbar(this._options.config)
    }
  }

  const defaultScroll = Object.create(B2C.customScroll)
  const headerScroll = Object.create(B2C.customScroll)

  defaultScroll.init()
  headerScroll.init({
    target: ".js-header-scrollbar",
    config: {
      theme: "dark",
      axis: "x",
      scrollButtons: {
        enable: true,
        scrollType: "stepless"
      },
      callbacks: {
        onInit: function() {
          if (this.mcs.leftPct === 0) {
            $(this)
              .find(".mCustomScrollBox")
              .addClass("has-started")
          }
        },
        whileScrolling: function() {
          if (this.mcs.leftPct === 0) {
            $(this)
              .removeClass("center has-ended")
              .addClass("has-started")
          } else if (this.mcs.leftPct > 0 && this.mcs.leftPct < 100) {
            $(this)
              .removeClass("has-started has-end")
              .addClass("center")
          } else {
            $(this)
              .removeClass("start center")
              .addClass("has-ended")
          }
        }
      }
    }
  })

  $(".js-custom-scrollbar-toggle").on("click", function() {
    $(headerScroll._options.target).mCustomScrollbar(
      "scrollTo",
      $(this).data("direction") == "left" ? "+=400" : "-=400"
    )
  })
})(jQuery)
