/// <reference path="../Scripts/jspack-vsdoc.js" />
var common = MindFusion.Common;
var ui = MindFusion.Common.UI;

// Create some data to use for tree nodes.
var treeData = [
	{
		title: "Parent 1",
		items: [{ title: "Child 1.1" }, { title: "Child 1.2" }]

	},
	{
		title: "Parent 2",
		items: [{ title: "Child 2.1" }, { title: "Child 2.2" }]

	},
	{
		title: "Parent 3",
		items: [{ title: "Child 3.1" }, { title: "Child 3.2" }, { title: "Child 3.3" }]

	}];

// Create a new TreeView control.
var tree = new ui.TreeView();
tree.theme = "gray";
tree.allowDrag = false;
tree.fromObject(treeData);

tree.itemMouseDown.addEventListener(nodeMouseDown);

document.body.appendChild(tree.draw());
tree.attach();

// Handle the contextmenu JS event to prevent the default context menu from showing.
tree.element.addEventListener('contextmenu', function (e) { e.preventDefault() });
// Handle the mousedown JS event to show the menu.
tree.element.addEventListener('mousedown', treeMouseDown);
tree.selectionChanged.addEventListener(treeSelectionChanged);
// Create a new Menu control.
var menu = new ui.Menu();
menu.theme = "gray";
menu.cssClass = "popmenu";
menu.visible = false;

var item1 = new ui.MenuItem();
item1.template = "<input type='text' id='node_title'></input>&#x2795;";
item1.tooltip = "Add child node";
item1.data = "child";
menu.items.add(item1);

var item2 = new ui.MenuItem("Remove selected node");
item2.data = "remove";
menu.items.add(item2);

menu.itemClick.addEventListener(menuItemClick);

document.body.appendChild(menu.draw());
menu.attach();

function treeSelectionChanged(sender, args)
{
	if (args.oldItems)
		args.oldItems.forEach((item) => console.log(item.title + " deselected"));

	if (args.newItems)
		args.newItems.forEach((item) => console.log(item.title + " selected"));
}
// This is the handler function for tree mousedown JS event.
// Modify the menu accordingly and show it on right mouse button click.
function treeMouseDown(e)
{
	if (e.button == 2)
	{
		if (!menu.visible)
		{
			menu.left = common.Unit.pixel(e.clientX + 20);
			menu.top = common.Unit.pixel(e.clientY);
			menu.items.first().tooltip = "Add root item";
			menu.items.first().data = "root";
			menu.items.last().enabled = false;
			menu.visible = true;
		}
	}
	else
		menu.visible = false;
}

// This is the handler function for tree itemMouseDown event.
// Modify the menu accordingly and show it on right mouse button click.
function nodeMouseDown(sender, args)
{
	if (args.rawEventArgs.button == 2)
	{
		menu.left = common.Unit.pixel(args.rawEventArgs.clientX + 20);
		menu.top = common.Unit.pixel(args.rawEventArgs.clientY);
		menu.items.first().tooltip = "Add child item";
		menu.items.first().data = "child";
		menu.items.last().enabled = true;
		menu.visible = true;
	}
	else
		menu.visible = false;
}

// This is the handler function for menu itemClick event.
// If the "remove" item was clicked, remove the selected node.
// If the "add" item was clicked, add a new child node (if there is a selected node),
// or a new root node.
function menuItemClick(sender, args)
{
	if (args.item.data == "remove")
	{
		var node = tree.selection.first();
		if (node.parentNode)
			node.parentNode.items.remove(node);
		else
			tree.items.remove(node);
	}
	else
	{
		var input = args.item.element.querySelector("#node_title");
		if (args.rawEventArgs.target == input) return;

		var title = input.value || "<untitled>";
		var node = new ui.TreeNode(title);

		if (args.item.data == "root")
			tree.items.add(node);
		else
			tree.selection.first().items.add(node);

		input.value = "";
	}

	menu.visible = false;
}