/*
	Author: Jeremy Espinosa
	Filename: header.js
	Description:
	Dependencies:
	How to use:
*/

;(function($) {
  "use strict"

  B2C.header = {
    init: function(option) {
      this._default = {
        target: ".js-header",
        overlay: ".js-header-overlay",
        menu: ".js-header-menu",
        user: ".js-header-user",
        menuIcon: ".js-header-menu-icon",
        search: ".js-search",
        searchTarget: ".js-header-search",
        activeClass: "is-active"
      }

      this._option = $.extend({}, this._default, option)

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

      // initialize utils to get the current window
      B2C.currentWindow.init()

      this.domCache()
      this.eventListener()
    },

    domCache: function() {
      this.$target = $(this._option.target)
      this.$overlay = $(this._option.overlay)
      this.$menu = $(this._option.menu)
      this.$search = $(this._option.search)
      this.$searchTarget = this.$target.find(this._option.searchTarget)
      this.$menuIcon = $(this._option.menuIcon)
      this.$menuList = this.$menuIcon.find("li")
      this.$user = $(this._option.user).find("img")
    },

    eventListener: function() {
      const self = this

      this.$menu.on("click", this.toggleMenu)
      this.$overlay.on("click", this.resetActiveClass)
      this.$user.on("click", this.toggleUser)
      this.$search.on("click", this.toggleSearch)
      this.$menuList.on("click", function() {
        self.toggleMenuList(self, this)
      })

      window.addEventListener("scroll", _.debounce(self.scrollHeader, 50))
    },

    toggleMenu: function() {
      const self = B2C.header

      $(this).toggleClass(self._option.activeClass)
      self.$overlay.toggleClass(self._option.activeClass)
    },

    resetActiveClass: function() {
      const self = B2C.header

      self.$target.find(".header__links").removeClass(self._option.activeClass)
      self.$overlay.removeClass(self._option.activeClass)
      self.$menu.removeClass(self._option.activeClass)
      self.$menuIcon.removeClass(self._option.activeClass)
      self.$search.removeClass(self._option.activeClass)
      self.$searchTarget.removeClass(self._option.activeClass)
      self.$target
        .find(".header__user-container")
        .removeClass(self._option.activeClass)
    },

    toggleUser: function() {
      const self = B2C.header
      let breakpoint = B2C.currentWindow.getBreakpoint()

      // when in desktop or tablet don't trigger the function only just allow to hover it to show the dropdown
      if (breakpoint != "desktop") {
        self.$target
          .find(".header__user-container")
          .toggleClass(self._option.activeClass)
        self.$overlay.toggleClass(self._option.activeClass)
        self.$target
          .find(".js-header-menu")
          .removeClass(self._option.activeClass)
        self.$overlay.addClass(self._option.activeClass)
      }
    },

    toggleSearch: function() {
      const self = B2C.header
      const { activeClass } = self._option

      self.$search.toggleClass(activeClass)
      self.$searchTarget.toggleClass(activeClass)
      self.$overlay.toggleClass(activeClass)

      if (self.$search.hasClass(activeClass)) {
        self.$searchTarget.find('input[type="search"').focus()
      }
    },

    toggleMenuList: function(self, element) {
      let breakpoint = B2C.currentWindow.getBreakpoint(),
        $element = $(element)

      if (breakpoint != "desktop") {
        // adding class to the active list
        $element
          .toggleClass(self._option.activeClass)
          .siblings()
          .removeClass(self._option.activeClass)

        self.$menuList.each(function() {
          if (!$(this).hasClass(self._option.activeClass)) {
            $(this)
              .find(".header__menu-icon__dropdown")
              .removeClass(self._option.activeClass)
          } else {
            $(this)
              .find(".header__menu-icon__dropdown")
              .toggleClass(self._option.activeClass)
          }
        })

        $element
          .find(".header__menu-icon__dropdown")
          .on("click", function(event) {
            event.stopPropagation()
          })
      }
    },
    scrollHeader: function() {
      const self = B2C.header
      if ($(window).scrollTop() > 0) {
        if ($("body").hasClass("body-adjustment--has-sub")) {
          self.$target.addClass("header--sticky-sub")
        }
      } else {
        self.$target.removeClass("header--sticky-sub")
      }
    }
  }

  // initialize header
  B2C.header.init()
})(jQuery)
