'use strict';

/**
 * @ngdoc directive
 * @name eeh-navigation-sidebar
 * @restrict AE
 *
 * @description
 * This directive adds a sidebar, loosely based on the Twitter Bootstrap navbar component, to the template.
 * If ui-router is used (which is recommended) then the sidebar directive should wrap a __ui-view__ element.
 * It should also be in a template that is at or near the top of the state hierarchy.
 *
 * @param {string} rootMenuName Sets the name of the menu that the directive will render.
 * @param {number=} [topOffset=51]
 * This attribute offsets the top position of the sidebar.
 * It should equal the height of the navbar, or 0 if there is no navbar.
 * This attribute should be used if the navbar's height is something different or if the navbar is not used.
 * @param {string=} [collapsedMenuItemIconClass="glyphicon-chevron-left"]
 * This attribute sets the icon used to indicate that a parent of a nested menu item is collapsed.
 * @param {string=} [expandedMenuItemIconClass="glyphicon-chevron-down"]
 * This attribute sets the icon used to indicate that a parent of a nested menu item is expanded.
 * @param {string=} [collapsedSidebarIconClass="glyphicon-arrow-right"]
 * This attribute sets the icon used to indicate that the sidebar is collapsed.
 * @param {string=} [expandedSidebarIconClass="glyphicon-arrow-left"]
 * This attribute sets the icon used to indicate that the sidebar is collapsed.
 * @param {boolean=} [searchInputIsVisible=true]
 * This attribute causes the search input to be shown or hidden.
 * @param {boolean=} [isTextCollapseButtonVisible=true]
 * This attribute causes the text collapse toggle button to be shown or hidden.
 * @param {boolean=} [isTextCollapsed=false]
 * This attribute sets the state of the text collapse button.
 */
var SidebarDirective = function ($document, $window, eehNavigation) {
    return {
        restrict: 'AE',
        transclude: true,
        templateUrl: 'template/eeh-navigation/sidebar/eeh-navigation-sidebar.html',
        scope: {
            rootMenuName: '=',
            topOffset: '@',
            collapsedMenuItemIconClass: '@',
            expandedMenuItemIconClass: '@',
            collapsedSidebarIconClass: '@',
            expandedSidebarIconClass: '@',
            searchInputIsVisible: '@',
            searchInputSubmit: '=',
            isTextCollapseButtonVisible: '@',
            isTextCollapsed: '@'
        },
        link: function (scope, element) {
            scope.topOffset = scope.topOffset || 51; // 51 is the default height of the navbar component
            scope.collapsedMenuItemIconClass = scope.collapsedMenuItemIconClass || 'glyphicon-chevron-left';
            scope.expandedMenuItemIconClass = scope.expandedMenuItemIconClass || 'glyphicon-chevron-down';
            scope.collapsedSidebarIconClass = scope.collapsedSidebarIconClass || 'glyphicon-arrow-right';
            scope.expandedSidebarIconClass = scope.expandedSidebarIconClass || 'glyphicon-arrow-left';
            scope.isTextCollapseButtonVisible = scope.isTextCollapseButtonVisible || true;
            scope.isTextCollapsed = scope.isTextCollapsed || false;
            scope.searchInputIsVisible = scope.searchInputIsVisible || true;
            scope.iconBaseClass = function () {
                return eehNavigation.iconBaseClass();
            };
            var menuItems = function () {
                return eehNavigation.menuItems();
            };
            scope.$watch(menuItems, function () {
                scope.sidebarMenuItems = eehNavigation.menuItemTree(scope.rootMenuName);
            });
            var windowElement = angular.element($window);
            windowElement.bind('resize', function () {
                scope.$apply();
            });

            var getWindowDimensions = function () {
                return {
                    height: windowElement.height(),
                    width: windowElement.width(),
                    innerHeight: windowElement.innerHeight(),
                    innerWidth: windowElement.innerWidth()
                };
            };

            var transcludedWrapper = element.find('#eeh-navigation-page-wrapper');
            scope.$watch(getWindowDimensions, function (newValue) {
                if (angular.isUndefined(newValue)) {
                    return;
                }
                var height = (newValue.innerHeight > 0) ? newValue.innerHeight : $window.screen.height;
                height = height - scope.topOffset;
                if (height < 1) {
                    height = 1;
                }
                if (height > scope.topOffset) {
                    transcludedWrapper.css('min-height', (height) + 'px');
                }
            }, true);

            scope.toggleSidebarTextCollapse = function() {
                scope.isTextCollapsed = !scope.isTextCollapsed;
                setTextCollapseState();
            };
            function setTextCollapseState() {
                var menuItemSelectorBase = 'ul.sidebar-nav:not(.sidebar-nav-nested) > li > a > ';
                var topLevelMenuItemTextSelector = menuItemSelectorBase + 'span > .menu-item-text';
                var topLevelSidebarArrowSelector = menuItemSelectorBase + '.sidebar-arrow';
                var sidebarMenuItemTextElements = element.find(topLevelMenuItemTextSelector + ',' + topLevelSidebarArrowSelector);
                var sidebarElement = element.find('.eeh-navigation-sidebar');
                if (scope.isTextCollapsed) {
                    transcludedWrapper.addClass('sidebar-text-collapsed');
                    sidebarElement.addClass('sidebar-text-collapsed');
                    sidebarMenuItemTextElements.addClass('hidden');
                } else {
                    transcludedWrapper.removeClass('sidebar-text-collapsed');
                    sidebarElement.removeClass('sidebar-text-collapsed');
                    sidebarMenuItemTextElements.removeClass('hidden');
                }

                scope.sidebarMenuItems.forEach(function (menuItem) {
                    menuItem.isCollapsed = true;
                });
            }

            /**
             * $includeContentLoaded is emitted when ng-include templates are finished loading.
             * The text collapse state needs to be evaluated after the sidebar menu templates (which are loaded via
             * ng-include) are loaded. If not, the sidebar menu item will not be hidden if the initial state of the
             * sidebar text is collapsed as the menu items will not exist when the state is initially evaluated.
             */
            scope.$on('$includeContentLoaded', function () {
                setTextCollapseState();
            });

            scope.isSidebarVisible = function () {
                return scope.searchInputIsVisible || (angular.isArray(scope.sidebarMenuItems) && scope.sidebarMenuItems
                        .filter(function (item) { return item._isVisible(); })
                        .length > 0);
            };

            scope.topLevelMenuItemClickHandler = function (clickedMenuItem) {
                if (!scope.isTextCollapsed || !clickedMenuItem.hasChildren()) {
                    return;
                }
                scope.sidebarMenuItems
                .filter(function (menuItem) {
                    return menuItem.hasChildren() && clickedMenuItem !== menuItem;
                })
                .forEach(function (menuItem) {
                    menuItem.isCollapsed = true;
                });
            };
        }
    };
};

angular.module('eehNavigation').directive('eehNavigationSidebar', SidebarDirective);


@@ -2067,17 +2067,18 @@
 ffset: '
-@
+=?
 ',%0A     
@@ -2105,33 +2105,34 @@
 ItemIconClass: '
-@
+=?
 ',%0A            e
@@ -2150,33 +2150,34 @@
 ItemIconClass: '
-@
+=?
 ',%0A            c
@@ -2195,33 +2195,34 @@
 ebarIconClass: '
-@
+=?
 ',%0A            e
@@ -2247,17 +2247,18 @@
 Class: '
-@
+=?
 ',%0A     
@@ -2279,33 +2279,34 @@
 nputIsVisible: '
-@
+=?
 ',%0A            s
@@ -2370,17 +2370,18 @@
 sible: '
-@
+=?
 ',%0A     
@@ -2405,17 +2405,18 @@
 apsed: '
-@
+=?
 '%0A      

Use =? for default properties in sidebar directive