"use strict";

angular.module("ui.checkbox.met", []).directive("checkboxMet", function() {
	return {
		scope: {
      btnStyleString: "@",
      staticLabel: "@",
      label: "=",
      disabled: "=",
      borderColor: "="
    },
		require: "ngModel",
		restrict: "E",
		replace: "true",
		template:
      "<span> \
        <button type=\"button\" ng-style=\"stylebtn\" ng-disabled=\"disabled\" class=\"btn btn-default btn-my\" \
                  ng-class=\"{'btn-xs': size==='default', 'btn-sm': size==='large', 'btn-lg': size==='largest'}\"> \
              <span ng-style=\"styleicon\" class=\"glyphicon\" ng-class=\"{'glyphicon-ok': checked===true}\"></span> \
        </button> \
        <span style=\"cursor:pointer;margin-left:7px;\">{{label || staticLabel}}</span> \
      </span>",

		link: function(scope, elem, attrs, modelCtrl) {
      var x = scope.disabled;

			scope.size = "default";
			// Default Button Styling
      if(scope.btnStyleString) {
        var style = {};
        var arr = scope.btnStyleString.split(';');
        angular.forEach(arr, function(el){
          if(el){
            var x = el.split(':');
            style[x[0]] = x[1];
          }
        });
        scope.stylebtn = style;
        
      }
			//scope.stylebtn = {};
			// Default Checkmark Styling - Adaptation to make it look more inline with the other MET forms elements
      		scope.stylebtn = { "height": "20px"};
			scope.styleicon = {"width": "6px", "left": "-2px", "font-size": "10px"};
			// If size is undefined, Checkbox has normal size (Bootstrap 'xs')
			if(attrs.large !== undefined) {
				scope.size = "large";
				scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "30px"};
				scope.styleicon = {"width": "8px", "left": "-5px", "font-size": "17px"};
			}
			if(attrs.larger !== undefined) {
				scope.size = "larger";
				scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "34px"};
				scope.styleicon = {"width": "8px", "left": "-8px", "font-size": "22px"};
			}
			if(attrs.largest !== undefined) {
				scope.size = "largest";
				scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "45px"};
				scope.styleicon = {"width": "11px", "left": "-11px", "font-size": "30px"};
			}

			var trueValue = true;
			var falseValue = false;

			// If defined set true value
			if(attrs.ngTrueValue !== undefined) {
				trueValue = attrs.ngTrueValue;
			}
			// If defined set false value
			if(attrs.ngFalseValue !== undefined) {
				falseValue = attrs.ngFalseValue;
			}

			// Check if name attribute is set and if so add it to the DOM element
			if(scope.name !== undefined) {
				elem.name = scope.name;
			}

			// Update element when model changes
			scope.$watch(function() {
				console.log("Entered watch");
				if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === true) {
					modelCtrl.$setViewValue(trueValue);
					// Adaptation to allow for null value (checkbox not touched by the user)
				} else if(modelCtrl.$modelValue === falseValue || modelCtrl.$modelValue === false) {
					modelCtrl.$setViewValue(falseValue);
				}
				return modelCtrl.$modelValue;
			}, function(newVal, oldVal) {
				scope.checked = modelCtrl.$modelValue === trueValue;
			}, true);

      scope.$watch("borderColor", function() {
        var newColor = scope.borderColor;
        if(newColor) {
          scope.stylebtn.borderColor = newColor;
        }
      });

			// On click swap value and trigger onChange function
			elem.bind("click", function() {
				if(scope.disabled)
					return;
				
				scope.$apply(function() {
					// Adaptation to allow for null value (checkbox not touched by the user)
					if(modelCtrl.$modelValue === falseValue || !modelCtrl.$modelValue) {
						modelCtrl.$setViewValue(trueValue);
					} else {
						modelCtrl.$setViewValue(falseValue);
					}
				});
			});
		}
	};
});
