var twigsTopMenuData = [
	{name: "File", contents: [
		{name: "New", disableOnPlay: true, shortcut: {name: "Ctrl N", ctrlKey: true, key: "n"}, click: function(twigs) {
			twigs.createNewInstance();
		}},
		{name: "Save", disableOnPlay: true, shortcut: {name: "Ctrl S", ctrlKey: true, key: "s"}, click: function(twigs) {
			twigs.saveFile();
		}},
		{name: "Close", disableOnPlay: true, shortcut: {name: "Ctrl W", ctrlKey: true, key: "w"}, click: function(twigs) {
			twigs.closeInstance();
		}, condition: function(twist) {
			return (!twist.twine);
		}},
		{name: "Edit in twist", click: function(twigs) {
			twigs.editInTwist();
		}, condition: function(twigs) {
			return window.hasOwnProperty("Twist");
		}}
	]},
	{name: "Edit", contents: [
		{name: "Undo", disableOnPlay: true, shortcut: {name: "Ctrl Z", ctrlKey: true, key: "z"}, click: function(twigs) {
			twigs.undo();
		}, condition: function(twigs) {
			return (twigs.storage.maxundo > 0 && twigs.undoLevel > 0);
		}}
	]},
	{name: "View", contents: [
		{name: "Contract channels", shortcut: {name: "C", key: "c"}, click: function(twigs) {
			twigs.timeline.contractChannels();
		}}
	]},
	{name: "Action", contents: []},
	{name: "Options", contents: [
		{name: "Settings", click: function(twigs) {
			twigs.ui.showSettings();
		}}
	]},
	{name: "Help", contents: [
		{name: "Help", click: function(twigs){
			$("#twigs_documentation")[0].click();
		}},
		{name: "Report bug", click: function(twist){
			$("#twigs_reportbug")[0].click();
		}},
		{name: "Contact owner", click: function(twist){
			$("#twigs_contact")[0].click();
		}},
		{name: "About", click: function(twigs) {
			twigs.ui.showAbout();
		}},
	]}
];

var TwigsUI = function(twigs) {
	var ui = this;
	var el = $("#twigs_sidebar");
	var elEditor = $("#twigs_editor_inner");
	
	ui.showLoadFileFFTPrompt = function(onComplete) {
		var t = $("<table />");
		var tb = $("<tbody />").appendTo(t);
		var ksmps = 64;
		
		var tr = $("<tr />").appendTo(tb);
		$("<td />").text("FFT size").appendTo(tr);
		
		var fftSize = $("<select />").change(function(){
			updateDecimation();
		});
		$("<td />").appendTo(tr).append(fftSize);
		for (let o of [256, 512, 1024, 2048]) {
			$("<option />").val(o).text(o).appendTo(fftSize);
		}
		
		tr = $("<tr />").appendTo(tb);
		$("<td />").text("FFT decimation").appendTo(tr);
		var fftDecim = $("<select />");
		$("<td />").appendTo(tr).append(fftDecim);
		
		function updateDecimation() {
			fftDecim.empty();
			var max = fftSize.val() / 64;
			var min = max / 2;
			for (let o of [min, max]) {
				$("<option />").val(o).text(o).appendTo(fftDecim);
			}
		}
		twirl.prompt.show(t, function() {
			onComplete(fftSize.val(), fftDecim.val());
		});
		fftSize.val(512);
		updateDecimation();
	};
	
	
	function addActionMenu(menu, item) {
		for (let i in twigsTopMenuData) {
			if (twigsTopMenuData[i].name.toLowerCase() == menu.toLowerCase()) {
				twigsTopMenuData[i].contents.push(item);
			}
		}
	}
	
	var zoomIcons = [
		{
			label: "Zoom in frequency",
			icon: "zoomIn",
			size: 20,
			click: function() {
				twigs.vzoomIn();
			},
			shortcut: {name: "W", key: "w"},
			menuAdd: "view",
			target: "#twigs_editor_vzoom"
		},
		{
			label: "Zoom out frequency",
			icon: "zoomOut",
			size: 20,
			click: function() {
				twigs.vzoomOut();
			},
			shortcut: {name: "W", key: "w"},
			menuAdd: "view",
			target: "#twigs_editor_vzoom"
		},
		{
			label: "Show all frequency",
			icon: "showAll",
			size: 20,
			click: function() {
				twigs.setFrequencyRegion(0, 1);
			},
			shortcut: {name: "W", key: "w"},
			menuAdd: "view",
			target: "#twigs_editor_vzoom"
		},
		{
			label: "Zoom in time",
			icon: "zoomIn",
			size: 20,
			click: function() {
				twigs.hzoomIn();
			},
			shortcut: {name: "W", key: "w"},
			menuAdd: "view",
			target: "#twigs_editor_hzoom"
		},
		{
			label: "Zoom out time",
			icon: "zoomOut",
			size: 20,
			click: function() {
				twigs.hzoomOut();
			},
			shortcut: {name: "W", key: "w"},
			menuAdd: "view",
			target: "#twigs_editor_hzoom"
		},
		{
			label: "Show all time",
			icon: "showAll",
			size: 20,
			click: function() {
				twigs.setTimeRegion(0, 1);
			},
			shortcut: {name: "W", key: "w"},
			menuAdd: "view",
			target: "#twigs_editor_hzoom"
		},
		{
			label: "Show all",
			icon: "showAll",
			size: 20,
			click: function() {
				twigs.setFrequencyRegion(0, 1, true);
				twigs.setTimeRegion(0, 1);
			},
			shortcut: {name: "W", key: "w"},
			menuAdd: "view",
			target: "#twigs_editor_hzoom"
		}
	
	];
		

	this.showAbout = function() {
		var el = $("<div />"); 
		var x = $("<div />").appendTo(el);
		var string = "twigs";
		var intervals = [];
		
		function addChar(c) {
			var elC = $("<h2 />").text(c).css("display", "inline-block").appendTo(x);
			var rate = (Math.random() * 0.005) + 0.001;
			var scale = 1;
			var scaleDirection = false;
			return setInterval(function(){
				if (scaleDirection) {
					if (scale < 1) {
						scale += rate;
					} else {
						scaleDirection = false;
					}
				} else {
					if (scale > 0.05) {
						scale -= rate;
					} else {
						scaleDirection = true;
					}
				}
				elC.css("transform", "scaleX(" + scale + ")");
			}, (Math.random() * 10) + 8);
		}
		for (let c of string) {
			intervals.push(addChar(c));
		}
		
		$("<p />").text("Version " + twigs.version.toFixed(1)).appendTo(el);
		$("<p />").css("font-size", "12px").text("By Richard Knight 2024").appendTo(el);
		
		twirl.prompt.show(el, function(){
			for (let i of intervals) clearInterval(i);
		});
	};
	
	this.showSettings = function() {
		var settings = [
			{
				name: "Undo levels",
				description: "Number of undo levels stored. Large numbers may affect memory usage",
				min: 0, max: 32, step: 1, dfault: 2, storageKey: "maxundo",
				onChange: function(val) {
					app.setControlChannel("twgs_maxundo", val);
				}
			},
			{
				name: "Resynthesis type",
				description: "Type of resynthesis to be used",
				options: ["Overlap-add", "Additive"],
				dfault: 0,
				storageKey: "resynthType"
			},
			{
				name: "Colour type",
				description: "Type of colouration to use in graphing",
				options: ["Monochrome", "Colour"],
				dfault: 0,
				storageKey: "colourType",
				onChange: function() {
					twigs.redraw();
				}
			},
			{
				name: "Graph type",
				description: "Approach to graphing partials used",
				options: ["Joined line", "Separate lines"],
				dfault: 0,
				storageKey: "graphType",
				onChange: function() {
					twigs.redraw();
				}
			},
			{
				name: "Basic lines",
				description: "Show thin, basic lines in graphing",
				bool: true,
				dfault: 0,
				storageKey: "basicLines",
				onChange: function() {
					twigs.redraw();
				}
			},
			{
				name: "Frequency gridlines",
				description: "Draw the vertical frequency grid",
				bool: true,
				dfault: 1,
				storageKey: "drawFrequencyGrid",
				onChange: function() {
					twigs.redraw();
				}
			},
			{
				name: "Time gridlines",
				description: "Draw the horizontal time grid",
				bool: true,
				dfault: 1,
				storageKey: "drawTimeGrid",
				onChange: function() {
					twigs.redraw();
				}
			},
			{
				name: "Zoom to start on load",
				description: "Zoom to the start portion of time and frequency when loading a new file",
				bool: true,
				dfault: 1,
				storageKey: "zoomOnLoad"
			}
		];
		twirl.showSettings(twigs, settings);
	};
	
	var icon_groups = {};
	
	ui.setSelectionMode = function(mode, iconObj) {
		for (let s of icon_groups.selection) s.setActive(false);
			iconObj.setActive(true);
			elEditor.css("cursor", iconObj.definition.cursor);
			twigs.setSelectionMode(mode);
	}

	function setOptionsArea(el) {
		var o = $("#twigs_options").empty();
		if (el) o.append(el);
	}
	
	ui.icons = {};

	var icons = [
		[{
			label: "Select single bin",
			icon: "pointer",
			shortcut: {name: "Q", key: "q"},
			menuAdd: "action",
			group: "selection",
			cursor: "default",
			bgColor: 1,
			clickOnInactive: true,
			click: function(obj) {
				ui.setSelectionMode(twigs.SELECTIONMODE.singleBin, obj);
			}
		},
		{
			label: "Select area",
			icon: "areaSelect",
			shortcut: {name: "W", key: "w"},
			menuAdd: "action",
			group: "selection",
			cursor: "crosshair",
			bgColor: 1,
			clickOnInactive: true,
			click: function(obj) {
				ui.setSelectionMode(twigs.SELECTIONMODE.dragArea, obj);
			}
		}],
		[{
			label: "Select bins",
			icon: "verticalArrows",
			shortcut: {name: "A", key: "a"},
			menuAdd: "action",
			group: "selection",
			cursor: "vertical-text",
			bgColor: 1,
			clickOnInactive: true,
			click: function(obj) {
				ui.setSelectionMode(twigs.SELECTIONMODE.dragBins, obj);
			}
		},
		{
			label: "Free select",
			icon: "lasso",
			shortcut: {name: "S", key: "s"},
			menuAdd: "action",
			group: "selection",
			cursor: "crosshair",
			bgColor: 1,
			clickOnInactive: true,
			click: function(obj) {
				ui.setSelectionMode(twigs.SELECTIONMODE.lasso, obj);
			}
		}],
		[{
			label: "Bin append select",
			icon: "waves",
			shortcut: {name: "Z", key: "z"},
			menuAdd: "action",
			group: "selection",
			cursor: "copy",
			bgColor: 1,
			clickOnInactive: true,
			click: function(obj) {
				ui.setSelectionMode(twigs.SELECTIONMODE.binAppend, obj);
			}
		},
		{
			label: "Play selection",
			icon: "ear",
			shortcut: {name: "X", key: "x"},
			menuAdd: "action",
			bgColor: 2,
			click: function(obj) {
				twigs.play(true);
			}
		}],
		[{
			label: "Move",
			icon: "move",
			shortcut: {name: "E", key: "e"},
			menuAdd: "action",
			group: "selection",
			cursor: "grab",
			bgColor: 3,
			clickOnInactive: true,
			click: function(obj) {
				ui.setSelectionMode(twigs.SELECTIONMODE.move, obj);
			},
			optionsArea: function() {
				if (!twigs.storage.movementType) twigs.storage.movementType = 2;
				if (!twigs.storage.interpolateVoid) twigs.storage.interpolateVoid = 1;
				if (!twigs.storage.interpolateRatio) twigs.storage.interpolateRatio = 0;
				var el = $("<div />");
				var typeOptions = new twirl.transform.Transform({host: twigs, element: el, definition: {
					name: "Movement",
					instr: "twgs_movement",
					parameters: [
						{name: "Movement type", description: "Type of movement to apply", channel: "twgs_movementtype", absolutechannel: true, options: ["Copy", "Leave void", "Retain amp/freq in void", "Retain amp in void", "Retain freq in void"], automatable: false, dfault: twigs.storage.movementType, onChange: function(val){
							twigs.storage.movementType = val;
							twigs.saveStorage();
						}},
						{name: "Interpolate void", description: "Interpolate values in the void created by the movement", channel: "twgs_interpolatevoid", absolutechannel: true, min: 0, max: 1, step: 1, automatable: false, dfault: twigs.storage.interpolateVoid, onChange: function(val){
							twigs.storage.interpolateVoid = val;
							twigs.saveStorage();
						}, conditions: [{channel: "twgs_movementtype", absolutechannel: true, operator: "ge", value: 2}]},
						{name: "Interpolation ratio", description: "Ratio of interpolation to integrate with target position", channel: "twgs_interpolateratio", absolutechannel: true, min: 0, max: 0.45, automatable: false, dfault: twigs.storage.interpolateRatio, onChange: function(val){
								twigs.storage.interpolateRatio = val;
								twigs.saveStorage();
						}}
					]
				}});
				return el;
			}
		},
		{
			label: "Transpose",
			icon: "arrowsUpDown",
			shortcut: {name: "R", key: "r"},
			menuAdd: "action",
			group: "selection",
			cursor: "row-resize",
			bgColor: 3,
			clickOnInactive: true,
			click: function(obj) {
				setSelectionMode(twigs.SELECTIONMODE.transpose, obj);
			}
		}],
		[{
			label: "Amplify",
			icon: "fileVolume",
			shortcut: {name: "D", key: "d"},
			menuAdd: "action",
			bgColor: 3,
			click: function(obj) {
				if (!twigs.hasSelection) return;
				var el = $("<div />");
				$("<h4 />").text("Amplitude scale").appendTo(el);
				var amp = $("<input />").attr("type", "range").attr("max", 10).attr("min", 0).attr("step", 0.000001).val(1).appendTo(el);
				twirl.prompt.show(el, function(){
					twigs.selectionOperation.amplify(amp.val());
				});
			}
		},
		{
			label: "Draw",
			icon: "pencil",
			shortcut: {name: "F", key: "f"},
			menuAdd: "action",
			group: "selection",
			cursor: "row-resize",
			bgColor: 3,
			clickOnInactive: true,
			click: function(obj) {
				setSelectionMode(twigs.SELECTIONMODE.draw, obj);
			}
		}],
		[{
			label: "Play",
			icon: "play",
			shortcut: {name: "Space", key: "space"},
			menuAdd: "action",
			bgColor: 2,
			click: function(obj) {
				twigs.play();
			}
		},
		{
			label: "Stop",
			icon: "stop",
			bgColor: 2,
			click: function(obj) {
				twigs.stop();
			}
		}],
		[{
			label: "Zoom in amplitude",
			icon: "brightnessIncrease",
			shortcut: {name: "C", key: "c"},
			menuAdd: "action",
			bgColor: 1,
			click: function(obj) {
				twigs.increaseAmpScaling();
			}
		},
		{
			label: "Zoom out amplitude",
			icon: "brightnessDecrease",
			shortcut: {name: "V", key: "v"},
			menuAdd: "action",
			bgColor: 1,
			click: function(obj) {
				twigs.decreaseAmpScaling();
			}
		}]
	];
	
	function addIcon(def) {
		let ops = {};
		Object.assign(ops, def);
		if (ops.shortcut) {
			ops.label += " (" + ops.shortcut.name + ")";
		}
		ops.click = function(obj) {
			def.click(obj);
			if (def.optionsArea) {
				setOptionsArea(def.optionsArea())
			} else {
				setOptionsArea();
			}
		}
		let icon = twirl.createIcon(ops);
		if (ops.menuAdd) {
			let menuData = {
				name: ops.label,
				click: function() {
					icon.el.click();
				}
			};
			if (ops.shortcut) {
				menuData.shortcut = ops.shortcut;
			}
			addActionMenu(ops.menuAdd, menuData); 
		}
		return icon;
	}
		
	function create() {
		for (let z of zoomIcons) {
			var icon = addIcon(z);
			$(z.target).append(icon.el);
		}
		
		var tb = $("<tbody />").appendTo($("<table />").appendTo(el));
		var icol = 0;
		var first;
		for (let row of icons) {
			var tr = $("<tr />").appendTo(tb);
			for (let col of row) {
				let icon = addIcon(col);
				if (!first) first = icon;
				if (col.group) {
					if (!icon_groups[col.group]) icon_groups[col.group] = [];
					icon_groups[col.group].push(icon);
				}
				var td = $("<td />").append(icon.el).appendTo(tr);
				if (col.bgColor) {
					td.css("background-color", "var(--bgColor" + col.bgColor + ")");
				}
				icons[col.key] = icon;
			}
		}
		first.click();
	}
	
	create();
	var topMenu = new twirl.TopMenu(twigs, twigsTopMenuData, $("#twigs_menubar"));
};