angular.module('app.directive.asset', ['app.filter', 'app.utility'])
.directive('assetTabs', function($filter, serviceUtility) {
	return {
		restrict: 'E',
		require: '?ngModel',
		scope: {
			onListChange: '&',
			onStateChange: '&',
			onTitleChange: '&',
			onRemovingTab: '&',
			onRemoveTab: '&',
			onChange: '&',
			readonly: '='
		},
		templateUrl: '/script/directive/directive.asset.html',
		replace: true,
		controller: function() {

		},
		link: function(scope, element, attrs, ctrl) {
			scope.activeTab = function(guid) {
				scope.data.tabs.forEach(function(tab) {
					if(tab.guid === guid) {
						tab.is_active = true;
					}
					else {
						tab.is_active = false;
					}
				});
			}

			scope.activeTabByIndex = function(idx) {
				scope.data.tabs.forEach(function(tab, i) {
					if(i === idx) {
						tab.is_active = true;
					}
					else {
						tab.is_active = false;
					}
				});
			}

			scope.setHomeThisTab = function(guid) {
				scope.activeTab(guid);
				scope.onStateChange({
					'$state': scope.data.tabs
				});
			}

			scope.closeTab = function(tab) {
				scope.onRemovingTab({
					'$tab': tab,
					'$callback': function() {
						scope.data.tabs.splice(scope.data.tabs.indexOf(tab), 1);
						scope.activeTabByIndex(scope.data.tabs.length - 1);
						scope.onRemoveTab({
							'$tab': tab
						});
					}
				});
			}

			scope.addTab = function() {
				var msgPleaseInsertName = $filter('translate')('$S_msg_PleaseInputTabName');
				var newTabName = prompt(msgPleaseInsertName, 'Tab ' + (scope.data.tabs.length + 1));
				if(newTabName == null) return;

				var tabctx = {
					'name': newTabName,
					'guid': 't' + serviceUtility.generateType2(),
					'type': 'dockpanel',
					"contents": 'p' + serviceUtility.generateType2()
				}

				scope.data.tabs.push(tabctx);
			}

			scope.$watch(function() {
				return ctrl.$modelValue;
			}, function(val) {
				scope.data = val.data;
			});

			scope.$watch('data.tabs', function(newval, oldval) {
				if(newval.length != oldval.length) {
					scope.onListChange({
						'$action': newval.length > oldval.length ? 'add' : 'remove',
						'$new': newval,
						'$old': oldval
					});
					return;
				}

				var idx;
				var diff = newval.filter(function(obj, i) {
					var n = angular.copy(obj);
					n.is_active = undefined;
					var o = angular.copy(oldval[i]);
					o.is_active = undefined;
					var isDiff = !angular.equals(n, o);
					if(isDiff) {
						idx = i
					}
					;
					return isDiff
				});

				if(diff.length > 0) {
					scope.onTitleChange({
						'$changed': diff,
						'$idx': idx
					});
					return;
				}

				var idNew = newval.filter(function(o) {
					return o.is_active;
				})[0];
				var idOld = oldval.filter(function(o) {
					return o.is_active;
				})[0];

				scope.onChange({
					'$new': idNew,
					'$old': idOld
				})

			}, true);
		}
	}
})
.directive('widgetDroppable', function($compile) {
	return {
		restrict: 'A',
		scope: {},
		link: function(scope, el, attrs) {
			el.addClass('drop-tab');
			var tabscope = el.scope();

			scope.name = tabscope.tab.name;

			scope.onTitleChange = function(newval, oldval) {
				tabscope.tab.name = newval;
				tabscope.$apply();
			}

			var dropzone = angular.element('<div class="widget-drop-zone" click-to-edit ng-model="name" ng-change="onTitleChange($new, $old)">' + el[0].innerText + '</div>');
			$compile(dropzone)(scope);
			el.append(dropzone);

		}
	}
})