(function (paw, mainMenuScanner) {
    function MobileMenuBarComponent($elt, mobileMenu) {
        var self = this;
        this.$elt = $elt;
        this.mobileMenu = mobileMenu;

        this.$outlet = null;
        this.$activeBar = null;
        this.cachedBarItemWidth = null; // helps with fitting bar menu items (we need original width)
        this.barItemsNo = -1;
        this.activeIndex = -1;

        this.onResize = function () {
            self.fitBarItems();
        };
    }

    MobileMenuBarComponent.prototype.init = function () {
        var self = this;
        this.$activeBar = this.$elt.find('.paw-mobile-menu-active-bar');
        this.composeMenuBarItems(mainMenuScanner.scanNavigationItems());
        this.fitBarItems();

        this.$elt.find('button.paw-btn-mobile-menu-bar').on('click', function () {
            self.mobileMenu.openMenu(null);
        });
        

        $(window).on('resize', this.onResize);
    };

    MobileMenuBarComponent.prototype.destroy = function () {
        $(window).off('resize', this.onResize);
        this.$elt.find('button.paw-btn-mobile-menu-bar').off('click');
        this.$elt.find('ul[data-mobile-menu="items-outlet"] li a').off('click');
    };

    MobileMenuBarComponent.prototype.composeMenuBarItems = function (items) {
        var self = this;
        this.$outlet = this.$elt.find('ul[data-mobile-menu="items-outlet"]');
        this.activeIndex = -1;
        this.$outlet.empty();

        this.$activeBar.css({
            'opacity': 0,
            'display': 'none'
        });

        var itemIndex = -1;
        paw.utils.iterable.iterate(items, function (item, i) {
            if (item.isHidden) {
                return;
            }

            itemIndex++;
            var markup = [];
            markup.push('<li class="paw-mobile-menu-bar-item' + (item.isActive ? ' active' : '') + '" data-list-item-id="' + item.listItemId + '">');
            markup.push('   <a href="' + item.link + '">');
            markup.push('      <i class="' + item.icon + '"></i>');
            markup.push('   </a>');
            markup.push('</li>');
            var $item = $(markup.join('\n'));
            self.$outlet.append($item);
            if (item.isActive && !item.isHidden) {
                self.activeIndex = itemIndex;
            }
            
        });

        this.$elt.find('ul[data-mobile-menu="items-outlet"] li a').on('click', function (e) {
            var $li = $(this).parent();
            var item = mainMenuScanner.getItem($li.attr('data-list-item-id'));

            if (item.isDropdown) {
                e.preventDefault();
                self.mobileMenu.openMenu(item);
                return;
            }
        });
    };

    MobileMenuBarComponent.prototype.fitBarItems = function () {
        if (paw.utils.value.notSet(this.cachedBarItemWidth)) {
            this.cachedBarItemWidth = this.$elt.find('li.paw-mobile-menu-bar-item').outerWidth();
        }
        var outletW = this.$outlet.innerWidth();
        this.barItemsNo = Math.floor(this.$outlet.innerWidth() / this.cachedBarItemWidth);
        var itemsW = outletW / this.barItemsNo;
        this.$elt.find('li.paw-mobile-menu-bar-item').css({
            width: itemsW,
            'min-width': itemsW,
            'max-width': itemsW
        });
        
        if (this.activeIndex > -1 && this.activeIndex < this.barItemsNo) {
            this.$activeBar.css({
                'display': 'block',
                'left': (this.activeIndex * itemsW) + 'px',
                'opacity': 1
            });
        }
        else {
            this.$activeBar.css({
                'display': 'none',
                'opacity': 0
            });
        }
    };

    MobileMenuBarComponent.prototype.reorder = function () {
        this.$elt.find('ul[data-mobile-menu="items-outlet"] li a').off('click');

        this.composeMenuBarItems(mainMenuScanner.scanNavigationItems());
        this.fitBarItems();
    };

    paw.com.mobileMenu.MobileMenuBarComponent = MobileMenuBarComponent;
})(paw, paw.helper.mainMenuScanner);