let nameJson = [];
let scanJson = {
	aps: [],
	stations: []
};

const drawScan = () => {
	let html;
	let selected;
	let width;
	let color;
	let macVendor;

	// Access Points
	getE("apNum").innerHTML = scanJson.aps.length;
	html = "<tr>"
		+ "<th class='id'></th>"
		+ "<th class='ssid'>SSID</th>"
		+ "<th class='name'>Name</th>"
		+ "<th class='ch'>Ch</th>"
		+ "<th class='rssi'>RSSI</th>"
		+ "<th class='enc'>Enc</th>"
		+ "<th class='lock'></th>"
		+ "<th class='mac'>MAC</th>"
		+ "<th class='vendor'>Vendor</th>"
		+ "<th class='selectColumn'></th>"
		+ "<th class='remove'></th>"
		+ "</tr>";

	for(var i=0;i<scanJson.aps.length;i++){
		selected = scanJson.aps[i][scanJson.aps[i].length-1];
		width = parseInt(scanJson.aps[i][3]) + 130;

		if(width < 50) color = "meter_red";
		else if(width < 70) color = "meter_orange";
		else color = "meter_green";

		html += (selected ? "<tr class='selected'>" : "<tr>")
			+ "<td class='id'>"+i+"</td>" // ID
			+ "<td class='ssid'>"+esc(scanJson.aps[i][0])+"</td>" // SSID
			+ "<td class='name'>"+(scanJson.aps[i][1].length > 0 ? esc(scanJson.aps[i][1]) : "<button onclick='add(0,"+i+")'>"+lang("add")+"</button>")+"</td>" // Name
			+ "<td class='ch'>"+esc(scanJson.aps[i][2])+"</td>" // Ch
			// RSSI
			+ "<td class='rssi'><div class='meter_background'> <div class='meter_forground "+color+"' style='width: "+width+"%;'><div class='meter_value'>" + scanJson.aps[i][3] + "</div></div> </div></td>"
			+ "<td class='enc'>"+esc(scanJson.aps[i][4])+"</td>" // ENC
			+ "<td class='lock'>"+(scanJson.aps[i][4] == "-" ? "":"&#x1f512;")+"</td>" // Lock Emoji
			+ "<td class='mac'>"+esc(scanJson.aps[i][5])+"</td>" // MAC
			+ "<td class='vendor'>"+esc(scanJson.aps[i][6])+"</td>" // Vendor
			// Select
			+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(0,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>"
			+ "<td class='remove'><button class='red' onclick='remove(0,"+i+")'>X</button></td>" // Remove
			+ "</tr>";
	}

	getE("apTable").innerHTML = html;

	// Stations
	getE("stNum").innerHTML = scanJson.stations.length;
	html = "<tr>"
		+ "<th class='id'></th>"
		+ "<th class='vendor'>Vendor</th>"
		+ "<th class='mac'>MAC</th>"
		+ "<th class='ch'>Ch</th>"
		+ "<th class='name'>Name</th>"
		+ "<th class='pkts'>Pkts</th>"
		+ "<th class='ap'>AP</th>"
		+ "<th class='lastseen'>Last seen</th>"
		+ "<th class='selectColumn'></th>"
		+ "<th class='remove'></th>"
		+ "</tr>";

	for(var i=0;i<scanJson.stations.length;i++){
		selected = scanJson.stations[i][scanJson.stations[i].length-1];
		ap = "";
		if(scanJson.stations[i][5] >= 0)
			ap = esc(scanJson.aps[scanJson.stations[i][5]][0]);

		html += (selected ? "<tr class='selected'>" : "<tr>")
			+ "<td class='id'>"+i+"</td>" // ID
			+ "<td class='vendor'>"+esc(scanJson.stations[i][3])+"</td>" // Vendor
			+ "<td class='mac'>"+esc(scanJson.stations[i][0])+"</td>" // MAC
			+ "<td class='ch'>"+esc(scanJson.stations[i][1])+"</td>" // Ch
			+ "<td class='name'>"+(scanJson.stations[i][2].length > 0 ? esc(scanJson.stations[i][2]) : "<button onclick='add(1,"+i+")'>"+lang("add")+"</button>")+"</td>" // Name
			+ "<td class='pkts'>"+esc(scanJson.stations[i][4])+"</td>" // Pkts
			+ "<td class='ap'>"+ap+"</td>" // AP
			+ "<td class='lastseen'>"+esc(scanJson.stations[i][6])+"</td>" // Last seen
			// Select
			+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(1,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>"
			+ "<td class='remove'><button class='red' onclick='remove(1,"+i+")'>X</button></td>" // Remove
			+ "</tr>";
	}

	getE("stTable").innerHTML = html;
}

function drawNames(){
	var html;
	var selected;

	// Names
	getE("nNum").innerHTML = nameJson.length;
	html = "<tr>"
		+ "<th class='id'></th>"
		+ "<th class='mac'>MAC</th>"
		+ "<th class='vendor'>Vendor</th>"
		+ "<th class='name'>Name</th>"
		+ "<th class='ap'>AP-BSSID</th>"
		+ "<th class='ch'>Ch</th>"
		+ "<th class='save'></th>"
		+ "<th class='selectColumn'></th>"
		+ "<th class='remove'></th>"
		+ "</tr>";

	for(var i=0;i<nameJson.length;i++){
		selected = nameJson[i][nameJson[i].length-1];

		html += (selected ? "<tr class='selected'>" : "<tr>")
			+ "<td class='id'>"+i+"</td>" // ID
			+ "<td class='mac' contentEditable='true' id='name_"+i+"_mac'>"+esc(nameJson[i][0])+"</td>" // MAC
			+ "<td class='vendor'>"+esc(nameJson[i][1])+"</td>" // Vendor
			+ "<td class='name' contentEditable='true' id='name_"+i+"_name'>"+esc(nameJson[i][2].substring(0,16))+"</td>" // Name
			+ "<td class='ap' contentEditable='true' id='name_"+i+"_apbssid'>"+esc(nameJson[i][3])+"</td>" // AP-BSSID
			+ "<td class='ch' contentEditable='true' id='name_"+i+"_ch'>"+esc(nameJson[i][4])+"</td>" // Ch
			+ "<td class='save'><button class='green' onclick='save("+i+")'>"+lang("save")+"</button></td>" // Save
			// Select
			+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(2,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>"
			+ "<td class='remove'><button class='red' onclick='remove(2,"+i+")'>X</button></td>" // Remove
			+ "</tr>";
	}

	getE("nTable").innerHTML = html;
}

function scan(type){
	var cmdStr = "scan "
		+ (type == 0 ? "aps " : "stations -t "+getE("scanTime").value+"s")
		+ " -ch "+getE("ch").options[getE("ch").selectedIndex].value;
	getFile("run?cmd="+cmdStr);
}

function load(){
	// APs and Stations
	getFile("run?cmd=save scan", function(){
		getFile("scan.json",function(res){
			scanJson = JSON.parse(res);
			drawScan();
		});
	});
	// Names
	getFile("run?cmd=save names", function(){
		getFile("names.json",function(res){
			nameJson = JSON.parse(res);
			drawNames();
		});
	});
}

function selectRow(type,id,selected){
	switch(type){
		case 0:
			scanJson.aps[id][7] = selected;
			drawScan();
			getFile("run?cmd="+(selected ? "":"de")+"select ap "+id);
			break;
		case 1:
			scanJson.stations[id][7] = selected;
			drawScan();
			getFile("run?cmd="+(selected ? "":"de")+"select station "+id);
			break;
		case 2:
			save(id);
			nameJson[id][5] = selected;
			drawNames();
			getFile("run?cmd="+(selected ? "":"de")+"select name "+id);
	}
}

function remove(type,id){
	switch(type){
		case 0:
			scanJson.aps.splice(id, 1);
			drawScan();
			getFile("run?cmd=remove ap "+id);
			break;
		case 1:
			scanJson.stations.splice(id, 1);
			drawScan();
			getFile("run?cmd=remove station "+id);
			break;
		case 2:
			nameJson.splice(id, 1);
			drawNames();
			getFile("run?cmd=remove name "+id);
	}
}

function save(id){
	var mac = getE("name_"+id+"_mac").innerHTML.replace("<br>","");
	var name = getE("name_"+id+"_name").innerHTML.replace("<br>","");
	var apbssid = getE("name_"+id+"_apbssid").innerHTML.replace("<br>","");
	var ch = getE("name_"+id+"_ch").innerHTML.replace("<br>","");
	var changed = mac != nameJson[id][0] || name != nameJson[id][2] || apbssid != nameJson[id][3] || ch != nameJson[id][4];
	if(changed){
		nameJson[id][0] = mac;
		nameJson[id][2] = name;
		nameJson[id][3] = apbssid;
		nameJson[id][4] = ch;

		if(nameJson[id][0].length != 17){
			showMessage("ERROR: MAC invalid");
			return;
		}

		getFile("run?cmd=replace name "+id+" -n \""+nameJson[id][2]+"\" -m \""+nameJson[id][0]+"\" -ch "+nameJson[id][4]+" -b \""+nameJson[id][3]+"\" "+(nameJson[id][5] ? "-s" : ""));

		drawNames();
	}
}

function add(type,id){
	if(nameJson.length >= 25){
		showMessage("Device Name List is full!");
		return;
	}

	switch(type){
		case 0:
			getFile("run?cmd=add name \""+scanJson.aps[id][0]+"\" -ap "+id);
			scanJson.aps[id][1] = scanJson.aps[id][0]; // name = SSID
			nameJson.push([scanJson.aps[id][5],scanJson.aps[id][6],scanJson.aps[id][0],"",scanJson.aps[id][2],false]);
			drawScan();
			break;
		case 1:
			getFile("run?cmd=add name \""+scanJson.stations[id][0]+"\" station "+id);
			scanJson.stations[id][2] = "device_"+nameJson.length; // name = device_
			nameJson.push([scanJson.stations[id][0],scanJson.stations[id][3],"device_"+nameJson.length,scanJson.aps[scanJson.stations[id][5]][5],scanJson.stations[id][1],false]);
			drawScan();
			break;
		case 2:
			getFile("run?cmd=add name device_"+nameJson.length+" -m 00:00:00:00:00:00 -ch 1");
			nameJson.push(["00:00:00:00:00:00","","device_"+nameJson.length,"",1,false]);
			drawNames();
	}

	drawNames();
}

function selectAll(type,select){
	switch(type){
		case 0:
			getFile("run?cmd="+(select ? "":"de")+"select aps");
			for(var i=0;i<scanJson.aps.length;i++) scanJson.aps[i][7] = select;
			drawScan();
			break;
		case 1:
			getFile("run?cmd="+(select ? "":"de")+"select stations");
			for(var i=0;i<scanJson.stations.length;i++) scanJson.stations[i][7] = select;
			drawScan();
			break;
		case 2:
			getFile("run?cmd="+(select ? "":"de")+"select names");
			for(var i=0;i<nameJson.length;i++) nameJson[i][5] = select;
			drawNames();
	}
}