'use strict';

commonsApp.directive('olrMultiSelect', ['$document', '$timeout', function($document, $timeout) {
		return {
	        restrict: 'E',
	        scope: {
	        	name:'@',
	        	itemId:'@',
	        	selectedValue: '=',
	        	noOfSelectedItems: '=',
	            listValue: '=',
	            required : '@',
	            defaultName : '=',
	            infocontrol : '='
	        },
	        template:
	        	'<div class="multiSelectList" id="{{itemId}}" click-outside="closeDropDown()" outside-if-not="{{itemId}}"><div class="multiSelectLabel" data-ng-click="openDropdown()">{{defaultName}}</div>' +
	        	'<ul class="multiSelectDropDown" aria-labelledby="dropdownMenu" data-ng-show="open">' +
	        	'<li data-ng-click="selectDefaultOption()" class="multiSelectDefaultOption" data-ng-class="{\'highlight-item\': isDefaultOptionSelected}"><span>{{defaultOption}}</span></li>' +
	        	'<li data-ng-repeat="list in listValue" class="multiSelectOption" data-ng-class="setClassName(list)" data-ng-click="toggleSelectItem(list)"><span>{{list}}</span>' +
	        	'</li></ul>' +
	        	'</div>',
	
	        link : function(scope, elem, attrs) {
	        	scope.valid = false;
	        	scope.defaultOption = scope.defaultName;
	        	scope.isDefaultOptionSelected = true;
	        	scope.openDropdown = function () {
	                scope.open = !scope.open;
	            };
	            scope.closeDropDown = function(){
	            	scope.open = false;
	            }
	            scope.selectDefaultOption = function(){
	            	scope.isDefaultOptionSelected = true;
	            	scope.open = !scope.open;
	            	scope.defaultName = scope.defaultOption;
	                scope.selectedValue.length = 0;
	                scope.noOfSelectedItems = 0;
	            	publishSelectedValue();
	            };
	            
	            scope.toggleSelectItem = function (list) {
	            	scope.isDefaultOptionSelected = false;
	                var intIndex = -1;
	                angular.forEach(scope.selectedValue, function (item, index) {
	                    if (item == list) {
	                        intIndex = index;
	                    }
	                });
	                
	                if (intIndex >= 0) {
	                	scope.noOfSelectedItems -= 1;
	                    scope.selectedValue.splice(intIndex, 1);
	                }
	                else {
	                	scope.noOfSelectedItems += 1;
	                    scope.selectedValue.push(list);
	                }
	                
	                if(scope.noOfSelectedItems == 0){
	                	scope.defaultName = scope.defaultOption;
	                } else {
	                	scope.defaultName = scope.noOfSelectedItems + " Selected";
	                }
	                publishSelectedValue();
	            };
	
	            var publishSelectedValue = function(){
	            	var publishValue = [];
	            	validateField();
	                if (scope.infocontrol && scope.infocontrol.publish) {
	                	if(scope.isDefaultOptionSelected){
	                		publishValue.push(scope.defaultOption);
	                	} else {
	                		publishValue = scope.selectedValue;
	                	}
						scope.infocontrol.publish(
								scope.name,
								publishValue,
								scope.valid);
					}
	            }
	            scope.setClassName = function(list) {
	                var className = '';
	                angular.forEach(scope.selectedValue, function (item, index) {
	                    if (item == list) {
	                    	className = 'highlight-item';
	                    }
	                });
	                return (className);
	            };
				
	            var validateField = function() {
					if (scope.required) {
						if (scope.selectedValue.length > 0) {
							scope.valid = true;
							scope.errorMessage = "";
						} else {
							scope.valid = false;
							scope.errorMessage = scope.name	+ " is a required field.";
						}
					}
				}
	        }
	    }
} ]);