(function() {
    "use strict";

    angular.module('shared')
        .component('mobileMenuItem', {
            templateUrl: '/shared/js/angular/main-navigation/mobile-menu-item.html',
            controller: 'MobileMenuItem',
            bindings: {
                menuOption: '<',
                buttonClass: '@',
                buttonHeadingLevel: '<?',
                itemClass: '@',
                digitalResourcesLabel: '@?',
                onSelectLink: '&?'
            }
        })
        .controller('MobileMenuItem', ['KeyCodes',
            function MobileMenuItem(KeyCodes) {
                var ctrl = this;

                ctrl.$onInit = function() {
                    ctrl.lastItemClass = 'js-last-' + ctrl.itemClass;
                    ctrl.subItemClass = 'sub-' + ctrl.itemClass;
                    ctrl.digitalResourcesLabel = ctrl.digitalResourcesLabel ? ctrl.digitalResourcesLabel : '';
                };

                ctrl.getMenuItemNameId = function() {
                    return 'id-' + ctrl.menuOption.name.replace(/\W+/g, '-').toLowerCase() + '-label';
                };

                ctrl.getItemClass = function(isLast) {
                    return isLast ? ctrl.lastItemClass : '';
                };

                ctrl.getButtonHeadingLevel = function(subcategory) {
                    return subcategory.name === ctrl.menuOption.name ? ctrl.buttonHeadingLevel : ctrl.buttonHeadingLevel + 1;
                };

                ctrl.onClick = function() {
                    if (ctrl.onSelectLink) {
                        ctrl.onSelectLink()
                    }
                };

                ctrl.onKeyDown = function(event) {
                    if (event.keyCode === KeyCodes.enter || event.keyCode === KeyCodes.space) {
                        ctrl.onSelectLink();
                    }
                };

            }
        ])
})();