‘use strict’;

!function($) {

/**

* ResponsiveMenu module.
* @module foundation.responsiveMenu
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
*/

class ResponsiveMenu {

/**
 * Creates a new instance of a responsive menu.
 * @class
 * @fires ResponsiveMenu#init
 * @param {jQuery} element - jQuery object to make into a dropdown menu.
 * @param {Object} options - Overrides to the default plugin settings.
 */
constructor(element, options) {
  this.$element = $(element);
  this.rules = this.$element.data('responsive-menu');
  this.currentMq = null;
  this.currentPlugin = null;

  this._init();
  this._events();

  Foundation.registerPlugin(this, 'ResponsiveMenu');
}

/**
 * Initializes the Menu by parsing the classes from the 'data-ResponsiveMenu' attribute on the element.
 * @function
 * @private
 */
_init() {
  // The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
  if (typeof this.rules === 'string') {
    let rulesTree = {};

    // Parse rules from "classes" pulled from data attribute
    let rules = this.rules.split(' ');

    // Iterate through every rule found
    for (let i = 0; i < rules.length; i++) {
      let rule = rules[i].split('-');
      let ruleSize = rule.length > 1 ? rule[0] : 'small';
      let rulePlugin = rule.length > 1 ? rule[1] : rule[0];

      if (MenuPlugins[rulePlugin] !== null) {
        rulesTree[ruleSize] = MenuPlugins[rulePlugin];
      }
    }

    this.rules = rulesTree;
  }

  if (!$.isEmptyObject(this.rules)) {
    this._checkMediaQueries();
  }
  // Add data-mutate since children may need it.
  this.$element.attr('data-mutate', (this.$element.attr('data-mutate') || Foundation.GetYoDigits(6, 'responsive-menu')));
}

/**
 * Initializes events for the Menu.
 * @function
 * @private
 */
_events() {
  var _this = this;

  $(window).on('changed.zf.mediaquery', function() {
    _this._checkMediaQueries();
  });
  // $(window).on('resize.zf.ResponsiveMenu', function() {
  //   _this._checkMediaQueries();
  // });
}

/**
 * Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
 * @function
 * @private
 */
_checkMediaQueries() {
  var matchedMq, _this = this;
  // Iterate through each rule and find the last matching rule
  $.each(this.rules, function(key) {
    if (Foundation.MediaQuery.atLeast(key)) {
      matchedMq = key;
    }
  });

  // No match? No dice
  if (!matchedMq) return;

  // Plugin already initialized? We good
  if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;

  // Remove existing plugin-specific CSS classes
  $.each(MenuPlugins, function(key, value) {
    _this.$element.removeClass(value.cssClass);
  });

  // Add the CSS class for the new plugin
  this.$element.addClass(this.rules[matchedMq].cssClass);

  // Create an instance of the new plugin
  if (this.currentPlugin) this.currentPlugin.destroy();
  this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
}

/**
 * Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
 * @function
 */
destroy() {
  this.currentPlugin.destroy();
  $(window).off('.zf.ResponsiveMenu');
  Foundation.unregisterPlugin(this);
}

}

ResponsiveMenu.defaults = {};

// The plugin matches the plugin classes with these plugin instances. var MenuPlugins = {

 dropdown: {
   cssClass: 'dropdown',
   plugin: Foundation._plugins['dropdown-menu'] || null
 },
drilldown: {
   cssClass: 'drilldown',
   plugin: Foundation._plugins['drilldown'] || null
 },
 accordion: {
   cssClass: 'accordion-menu',
   plugin: Foundation._plugins['accordion-menu'] || null
 }

};

// Window exports Foundation.plugin(ResponsiveMenu, ‘ResponsiveMenu’);

}(jQuery);