"use strict";
/*global GoldenLayout*/

//TODO: this works for now but probably still needs a bit of work
//TODO: may eventually want to wrap up registering named component templates as a directive to reduce the amount of info in the toConfig()


angular.module("mp-ide.components.layout", [
	// deps go here
])

.directive("layout", [
"$window", "$compile",
function($window, $compile) {
	return {
		restrict: "E",
		scope: true,
		controllerAs: "ctrl",
		link: function(scope, element, attrs, ctrl, transcludeFn) {

			if (attrs.layoutModel) { //TODO: watch
				var model = scope.$parent.$eval(attrs.layoutModel);
				if (model.options.settings) scope.model.settings = model.options.settings;
				if (model.options.dimensions) scope.model.dimensions = model.options.dimensions;
			}

			scope.goldenLayoutConfig = {
				settings: scope.model.settings,
				dimensions: scope.model.dimensions,
				content: scope.model.data,
			};
			scope.goldenLayout = new GoldenLayout(scope.goldenLayoutConfig, element);
			Object.keys(scope.templates).forEach(function(tmplName) {
				var tmpl = scope.templates[tmplName];
				scope.goldenLayout.registerComponent(tmplName, function(container, state) {
					var element = container.getElement();
					element.html(tmpl);
					$compile(element.contents())(scope.$parent);
				});
			});
			scope.goldenLayout.registerComponent("angularTemplate", function createAngularTemplate(container, state) {
				var element = container.getElement();
				element.html(state.template);
				if (typeof state.template === "string") {
					$compile(element.contents())(scope.$parent);
				}
			});
			scope.goldenLayout.init();

			scope.$watch(
				function getDimensions() {
					return {
						w: element.width(),
						h: element.height(),
					};
				},
				function onDimensionsChanged(dim, oldDim) {
					if (!dim) return;
					scope.goldenLayout.updateSize(dim.w, dim.h);
				},
				true //deep
			);

			$($window).on("resize", function() {
				scope.$apply();
			});
		},
		controller: function($scope) {
			if (!$scope.model) $scope.model = {};
			if (!$scope.model.data) $scope.model.data = [];
			$scope.templates = {};
			this.register = function(name, tmpl) {
				$scope.templates[name] = tmpl;
			};
		},
	};
},
])

.directive("layoutRow", function() {
	return {
		restrict: "E",
		require: "^^layout",
		scope: true,
		link: function(scope, element, attrs, layoutCtrl) {
			var options = attrs.layoutOptions ? scope.$parent.$eval(attrs.layoutOptions) : {},
				config = {
					type: "row",
					content: scope.model.data,
				},
				item = angular.extend({}, options, config);
			scope.$parent.model.data.push(item);
		},
		controller: function($scope) {
			if (!$scope.hasOwnProperty("model")) $scope.model = {};
			if (!$scope.model.data) $scope.model.data = [];
		},
	};
})

.directive("layoutColumn", function() {
	return {
		restrict: "E",
		require: "^^layout",
		scope: true,
		link: function(scope, element, attrs, layoutCtrl) {
			var options = attrs.layoutOptions ? scope.$parent.$eval(attrs.layoutOptions) : {},
				config = {
					type: "column",
					content: scope.model.data,
				},
				item = angular.extend({}, options, config);
			scope.$parent.model.data.push(item);
		},
		controller: function($scope) {
			if (!$scope.hasOwnProperty("model")) $scope.model = {};
			if (!$scope.model.data) $scope.model.data = [];
		},
	};
})

.directive("layoutStack", function() {
	return {
		restrict: "E",
		require: "^^layout",
		scope: true,
		link: function(scope, element, attrs, layoutCtrl) {
			var options = attrs.layoutOptions ? scope.$parent.$eval(attrs.layoutOptions) : {},
				config = {
					type: "stack",
					content: scope.model.data,
				},
				item = angular.extend({}, options, config);
			scope.$parent.model.data.push(item);
		},
		controller: function($scope) {
			if (!$scope.hasOwnProperty("model")) $scope.model = {};
			if (!$scope.model.data) $scope.model.data = [];
		},
	};
})

.directive("layoutContent", function() {
	return {
		restrict: "E",
		require: "^^layout",
		scope: true,
		link: {
			pre: function(scope, element, attrs, layoutCtrl) {
				var options = attrs.layoutOptions ? scope.$parent.$eval(attrs.layoutOptions) : {},
					config = {
						type: "component",
						componentName: "angularTemplate",
						componentState: {
							template: element.remove(),
						},
					},
					item = angular.extend({}, options, config);
				scope.$parent.model.data.push(item);
			},
		},
		controller: function($scope) {
			if (!$scope.hasOwnProperty("model")) $scope.model = {};
			if (!$scope.model.data) $scope.model.data = [];
		},
	};
});