/**
 * File: LeftAndMain.Tree.js
 */

import $ from 'jQuery';

$.entwine('ss.tree', function($){

	$('.cms-tree').entwine({
		
		Hints: null,

		IsUpdatingTree: false,

		IsLoaded: false,

		onadd: function(){
			this._super();

			// Don't reapply (expensive) tree behaviour if already present
			if($.isNumeric(this.data('jstree_instance_id'))) return;
			
			var hints = this.attr('data-hints');
			if(hints) this.setHints($.parseJSON(hints));
			
			/**
			 * @todo Icon and page type hover support
			 * @todo Sorting of sub nodes (originally placed in context menu)
			 * @todo Automatic load of full subtree via ajax on node checkbox selection (minNodeCount = 0)
			 *  to avoid doing partial selection with "hidden nodes" (unloaded markup)
			 * @todo Disallow drag'n'drop when node has "noChildren" set (see siteTreeHints)
			 * @todo Disallow moving of pages marked as deleted 
			 *  most likely by server response codes rather than clientside
			 * @todo "defaultChild" when creating a page (sitetreeHints)
			 * @todo Duplicate page (originally located in context menu)
			 * @todo Update tree node title information and modified state after reordering (response is a JSON array)
			 * 
			 * Tasks most likely not required after moving to a standalone tree:
			 * 
			 * @todo Context menu - to be replaced by a bezel UI
			 * @todo Refresh form for selected tree node if affected by reordering (new parent relationship)
			 * @todo Cancel current form load via ajax when new load is requested (synchronous loading)
			 */
			var self = this;
				this
					.jstree(this.getTreeConfig())
					.bind('loaded.jstree', function(e, data) {
						self.setIsLoaded(true);

						// Add ajax settings after init period to avoid unnecessary initial ajax load
						// of existing tree in DOM - see load_node_html()
						data.inst._set_settings({'html_data': {'ajax': {
							'url': self.data('urlTree'),
							'data': function(node) {
								var params = self.data('searchparams') || [];
								// Avoid duplication of parameters
								params = $.grep(params, function(n, i) {return (n.name != 'ID' && n.name != 'value');});
								params.push({name: 'ID', value: $(node).data("id") ? $(node).data("id") : 0});
								params.push({name: 'ajax', value: 1});
								return params;
							}
						}}});

						self.updateFromEditForm();
						self.css('visibility', 'visible');
						
						// Only show checkboxes with .multiple class
						data.inst.hide_checkboxes();
					})
					.bind('before.jstree', function(e, data) {
						if(data.func == 'start_drag') {
							// Don't allow drag'n'drop if multi-select is enabled'
							if(!self.hasClass('draggable') || self.hasClass('multiselect')) {
								e.stopImmediatePropagation();
								return false;
							}
						}
						
						if($.inArray(data.func, ['check_node', 'uncheck_node'])) {
							// don't allow check and uncheck if parent is disabled
							var node = $(data.args[0]).parents('li:first');
							var allowedChildren = node.find('li:not(.disabled)');

							// if there are child nodes that aren't disabled, allow expanding the tree
							if(node.hasClass('disabled') && allowedChildren == 0) {
								e.stopImmediatePropagation();
								return false;
							}
						}
					})
					.bind('move_node.jstree', function(e, data) {
						if(self.getIsUpdatingTree()) return;

						var movedNode = data.rslt.o, newParentNode = data.rslt.np, oldParentNode = data.inst._get_parent(movedNode), newParentID = $(newParentNode).data('id') || 0, nodeID = $(movedNode).data('id');
						var siblingIDs = $.map($(movedNode).siblings().andSelf(), function(el) {
							return $(el).data('id');
						});

						$.ajax({
							'url': self.data('urlSavetreenode'),
							'type': 'POST',
							'data': {
								ID: nodeID, 
								ParentID: newParentID,
								SiblingIDs: siblingIDs
							},
							success: function() {
								// We only need to update the ParentID if the current page we're on is the page being moved
								if ($('.cms-edit-form :input[name=ID]').val() == nodeID) {
									$('.cms-edit-form :input[name=ParentID]').val(newParentID);
								}
								self.updateNodesFromServer([nodeID]);
							},
							statusCode: {
								403: function() {
									$.jstree.rollback(data.rlbk);
								}
							}
						});
					})
					// Make some jstree events delegatable
					.bind('select_node.jstree check_node.jstree uncheck_node.jstree', function(e, data) {
						$(document).triggerHandler(e, data);
					});
		},
		onremove: function(){
			this.jstree('destroy');
			this._super();
		},

		'from .cms-container': {
			onafterstatechange: function(e){
				this.updateFromEditForm();
				// No need to refresh tree nodes, we assume only form submits cause state changes
			}
		},

		'from .cms-container form': {
			onaftersubmitform: function(e){
				var id = $('.cms-edit-form :input[name=ID]').val();
				// TODO Trigger by implementing and inspecting "changed records" metadata 
				// sent by form submission response (as HTTP response headers)
				this.updateNodesFromServer([id]);
			}
		},

		getTreeConfig: function() {
			var self = this;
			return {
				'core': {
					'initially_open': ['record-0'],
					'animation': 0,
					'html_titles': true
				},
				'html_data': {
					// 'ajax' will be set on 'loaded.jstree' event
				},
				'ui': {
					"select_limit" : 1,
					'initially_select': [this.find('.current').attr('id')]
				},
				"crrm": {
					'move': {
						// Check if a node is allowed to be moved.
						// Caution: Runs on every drag over a new node
						'check_move': function(data) {
							var movedNode = $(data.o), newParent = $(data.np), 
								isMovedOntoContainer = data.ot.get_container()[0] == data.np[0],
								movedNodeClass = movedNode.getClassname(), 
								newParentClass = newParent.getClassname(),
								// Check allowedChildren of newParent or against root node rules
								hints = self.getHints(),
								disallowedChildren = [],
								hintKey = newParentClass ? newParentClass : 'Root',
								hint = (hints && typeof hints[hintKey] != 'undefined') ? hints[hintKey] : null;

							// Special case for VirtualPage: Check that original page type is an allowed child
							if(hint && movedNode.attr('class').match(/VirtualPage-([^\s]*)/)) movedNodeClass = RegExp.$1;
							
							if(hint) disallowedChildren = (typeof hint.disallowedChildren != 'undefined') ? hint.disallowedChildren : [];
							var isAllowed = (
								// Don't allow moving the root node
								movedNode.data('id') !== 0 
								// Archived pages can't be moved
								&& !movedNode.hasClass('status-archived')
								// Only allow moving node inside the root container, not before/after it
								&& (!isMovedOntoContainer || data.p == 'inside')
								// Children are generally allowed on parent
								&& !newParent.hasClass('nochildren')
								// movedNode is allowed as a child
								&& (!disallowedChildren.length || $.inArray(movedNodeClass, disallowedChildren) == -1)
							);
							
							return isAllowed;
						}
					}
				},
				'dnd': {
					"drop_target" : false,
					"drag_target" : false
				},
				'checkbox': {
					'two_state': true
				},
				'themes': {
					'theme': 'apple',
					'url': $('body').data('frameworkpath') + '/thirdparty/jstree/themes/apple/style.css'
				},
				// Caution: SilverStripe has disabled $.vakata.css.add_sheet() for performance reasons,
				// which means you need to add any CSS manually to framework/admin/scss/_tree.css
				'plugins': [
					'html_data', 'ui', 'dnd', 'crrm', 'themes', 
					'checkbox' // checkboxes are hidden unless .multiple is set
				]
			};
		},
		
		/**
		 * Function:
		 *  search
		 * 
		 * Parameters:
		 *  (Object) data Pass empty data to cancel search
		 *  (Function) callback Success callback
		 */
		search: function(params, callback) {
			if(params) this.data('searchparams', params);
			else this.removeData('searchparams');
			this.jstree('refresh', -1, callback);
		},
		
		/**
		 * Function: getNodeByID
		 * 
		 * Parameters:
		 *  (Int) id 
		 * 
		 * Returns
		 *  DOMElement
		 */
		getNodeByID: function(id) {
			return this.find('*[data-id='+id+']');
		},

		/**
		 * Creates a new node from the given HTML.
		 * Wrapping around jstree API because we want the flexibility to define
		 * the node's <li> ourselves. Places the node in the tree
		 * according to data.ParentID.
		 *
		 * Parameters:
		 *  (String) HTML New node content (<li>)
		 *  (Object) Map of additional data, e.g. ParentID
		 *  (Function) Success callback
		 */
		createNode: function(html, data, callback) {
			var self = this, 
				parentNode = data.ParentID !== void 0 ? self.getNodeByID(data.ParentID) : false, // Explicitly check for undefined as 0 is a valid ParentID
				newNode = $(html);
			
			// Extract the state for the new node from the properties taken from the provided HTML template.
			// This will correctly initialise the behaviour of the node for ajax loading of children.
			var properties = {data: ''};
			if(newNode.hasClass('jstree-open')) {
				properties.state = 'open';
			} else if(newNode.hasClass('jstree-closed')) {
				properties.state = 'closed';
			}
			this.jstree(
				'create_node', 
				parentNode.length ? parentNode : -1, 
				'last', 
				properties,
				function(node) {
					var origClasses = node.attr('class');
					// Copy attributes
					for(var i=0; i<newNode[0].attributes.length; i++){
						var attr = newNode[0].attributes[i];
						node.attr(attr.name, attr.value);
					}
					// Substitute html from request for that generated by jstree
					node.addClass(origClasses).html(newNode.html());
					callback(node);
				}
			);
		},

		/**
		 * Updates a node's state in the tree,
		 * including all of its HTML, as well as its position.
		 * 
		 * Parameters:
		 *  (DOMElement) Existing node
		 *  (String) HTML New node content (<li>)
		 *  (Object) Map of additional data, e.g. ParentID
		 */
		updateNode: function(node, html, data) {
			var self = this, newNode = $(html), origClasses = node.attr('class');

			var nextNode = data.NextID ? this.getNodeByID(data.NextID) : false;
			var prevNode = data.PrevID ? this.getNodeByID(data.PrevID) : false;
			var parentNode = data.ParentID ? this.getNodeByID(data.ParentID) : false;

			// Copy attributes. We can't replace the node completely
			// without removing or detaching its children nodes.
			$.each(['id', 'style', 'class', 'data-pagetype'], function(i, attrName) {
				node.attr(attrName, newNode.attr(attrName));
			});

			// To avoid conflicting classes when the node gets its content replaced (see below)
			// Filter out all previous status flags if they are not in the class property of the new node
			origClasses = origClasses.replace(/status-[^\s]*/, '');

			// Replace inner content
			var origChildren = node.children('ul').detach();
			node.addClass(origClasses).html(newNode.html()).append(origChildren);

			if (nextNode && nextNode.length) {
				this.jstree('move_node', node, nextNode, 'before');
			}
			else if (prevNode && prevNode.length) {
				this.jstree('move_node', node, prevNode, 'after');
			}
			else {
				this.jstree('move_node', node, parentNode.length ? parentNode : -1);
			}
		},
		
		/**
		 * Sets the current state based on the form the tree is managing.
		 */
		updateFromEditForm: function() {
			var node, id = $('.cms-edit-form :input[name=ID]').val();
			if(id) {
				node = this.getNodeByID(id);
				if(node.length) {
					this.jstree('deselect_all');
					this.jstree('select_node', node);
				} else {
					// If form is showing an ID that doesn't exist in the tree,
					// get it from the server
					this.updateNodesFromServer([id]);
				}
			} else {
				// If no ID exists in a form view, we're displaying the tree on its own,
				// hence to page should show as active
				this.jstree('deselect_all');
			}
		},

		/**
		 * Reloads the view of one or more tree nodes
		 * from the server, ensuring that their state is up to date
		 * (icon, title, hierarchy, badges, etc).
		 * This is easier, more consistent and more extensible 
		 * than trying to correct all aspects via DOM modifications, 
		 * based on the sparse data available in the current edit form.
		 *
		 * Parameters:
		 *  (Array) List of IDs to retrieve
		 */
		updateNodesFromServer: function(ids) {
			if(this.getIsUpdatingTree() || !this.getIsLoaded()) return;

			var self = this, i, includesNewNode = false;
			this.setIsUpdatingTree(true);
			self.jstree('save_selected');

			var correctStateFn = function(node) {
				// Duplicates can be caused by the subtree reloading through
				// a tree "open"/"select" event, while at the same time creating a new node
				self.getNodeByID(node.data('id')).not(node).remove();
				
				// Select this node
				self.jstree('deselect_all');
				self.jstree('select_node', node);
			};

			// TODO 'initially_opened' config doesn't apply here
			self.jstree('open_node', this.getNodeByID(0));
			self.jstree('save_opened');
			self.jstree('save_selected');

			$.ajax({
				url: $.path.addSearchParams(this.data('urlUpdatetreenodes'), 'ids=' + ids.join(',')),
				dataType: 'json',
				success: function(data, xhr) {
					$.each(data, function(nodeId, nodeData) {
						var node = self.getNodeByID(nodeId);

						// If no node data is given, assume the node has been removed
						if(!nodeData) {
							self.jstree('delete_node', node);
							return;
						}

						// Check if node exists, create if necessary
						if(node.length) {
							self.updateNode(node, nodeData.html, nodeData);
							setTimeout(function() {
								correctStateFn(node);
							}, 500);
						} else {
							includesNewNode = true;

							// If the parent node can't be found, it might have not been loaded yet.
							// This can happen for deep trees which require ajax loading.
							// Assumes that the new node has been submitted to the server already.
							if(nodeData.ParentID && !self.find('li[data-id='+nodeData.ParentID+']').length) {
								self.jstree('load_node', -1, function() {
									newNode = self.find('li[data-id='+nodeId+']');
									correctStateFn(newNode);
								});
							} else {
								self.createNode(nodeData.html, nodeData, function(newNode) {
									correctStateFn(newNode);
								});
							}
						}
					});

					if(!includesNewNode) {
						self.jstree('deselect_all');
						self.jstree('reselect');
						self.jstree('reopen');
					}
				},
				complete: function() {
					self.setIsUpdatingTree(false);
				}
			});
		}

	});
	
	$('.cms-tree.multiple').entwine({
		onmatch: function() {
			this._super();
			this.jstree('show_checkboxes');
		},
		onunmatch: function() {
			this._super();
			this.jstree('uncheck_all');
			this.jstree('hide_checkboxes');
		},
		/**
		 * Function: getSelectedIDs
		 * 
		 * Returns:
		 * 	(Array)
		 */
		getSelectedIDs: function() {
			return $(this)
				.jstree('get_checked')
				.not('.disabled')
				.map(function() {
					return $(this).data('id');
				})
				.get();
		}
	});
	
	$('.cms-tree li').entwine({
		
		/**
		 * Function: setEnabled
		 * 
		 * Parameters:
		 * 	(bool)
		 */
		setEnabled: function(bool) {
			this.toggleClass('disabled', !(bool));
		},
		
		/**
		 * Function: getClassname
		 * 
		 * Returns PHP class for this element. Useful to check business rules like valid drag'n'drop targets.
		 */
		getClassname: function() {
			var matches = this.attr('class').match(/class-([^\s]*)/i);
			return matches ? matches[1] : '';
		},
		
		/**
		 * Function: getID
		 * 
		 * Returns:
		 * 	(Number)
		 */
		getID: function() {
			return this.data('id');
		}
	});
});