/*
@selectorContainer - селектор контейнера с кнопкой, куда добавить меню
@item - массив объектов с описанием пунктов меню, пнример:
[
	{
		name: 'Создать',
		icon: 'plus', //не обязательно
		handler: function(){
			....
		}
	}
]
@showMode - по какому событию отображать меню, принимает одно из значений: click - по клику, hover - при наведении курсором
*/

this.UKDropdownMenu = class {
	constructor(selectorContainer, items = null, showMode = 'click') {
		this.selectorContainer = selectorContainer;
		this.items = items;
		this.showMode = showMode;

		this.init();
	}

	closeMenu(){
		UIkit.dropdown(this.menuContainer).hide(0);
	}

	getMenuItem(name, icon, handler, disabled = false){
    const li = $(`<li>`);
    const a = $('<a>');
    const span = $(`<span>`, {class: "uk-margin-small-right"});

    if(icon) span.attr('uk-icon', `icon: ${icon}`);

    if(disabled) li.addClass('uk-disabled');

    a.append(span, i18n.tr(name));
    li.append(a);

    li.on('click', e => {
      e.preventDefault();
      e.stopPropagation();
      
      this.closeMenu();

      if(handler) handler();
    });

    return li;
  }

	createMenu() {
		this.items.forEach(item => {
      if(item == 'divider') {
        this.nav.append('<li class="uk-nav-divider"></li>');
      } else {
        const {name, icon, handler, disabled = false} = item;
        this.nav.append(this.getMenuItem(name, icon, () => handler(), disabled));
      }
    });
  }

  init() {
  	try {
  		if(!this.items || !this.items.length) throw new Error('Не передан список пунктов меню');

  		if(!this.selectorContainer) throw new Error('Не передан селектор контейнера');

  		this.componentContainer = $(this.selectorContainer);

  		if(!this.componentContainer || !this.componentContainer.length) throw new Error('Не передан или передан некорректный селектор контейнера');

  		this.menuContainer = $('<div>', {class: 'dropdown-menu-container', 'uk-dropdown': `mode: ${this.showMode}`});
  		this.nav = $('<ul>', {class: 'uk-nav uk-nav-parent-icon uk-dropdown-nav'});

  		this.menuContainer.append(this.nav);

  		this.componentContainer.addClass('uk-flex-inline uk-flex-wrap');
  		this.componentContainer.append(this.menuContainer);

  		this.createMenu();

  	} catch (err) {
  		console.log(`UKDropdownMenu ERROR: [${err.message}]`);
  	}
  }
}