// Put the real domain here
var baseUrl = "http://localhost"

var network;
var simulationData;
animationPlaying = false;
currentAnimationStep = 0;
var animationInterval;
var animationLen = 10;
const stepSlider = document.querySelector('#stepRange');
const stepField = document.querySelector('#stepField');
const animationDurationSlider = document.querySelector('#animationDurationRange');
const animationDurationField = document.querySelector('#animationDurationField');

var selectedGraph;
var horizon;
var states;
var initial_distribution;
var rules;
var colors;

// Debuging
//selectedGraph = "strict graph GraphHello {\n0 -- 1;\n1 -- 2;\n1 -- 3;\n}";
//selectedGraph = "strict graph Default {\n0 -- 1;\n1 -- 2;\n2 -- 3;\n3 -- 4;\n4 -- 5;\n0 -- 5;\n0 -- 3;\n0 -- 4;\n0 -- 2;\n1 -- 4;\n1 -- 5;\n1 -- 6;\n3 -- 5;\n3 -- 6;\n3 -- 4;\n}"

selectedGraph = "strict graph Default {\n0 -- 10;\n0 -- 1;\n1 -- 11;\n1 -- 2;\n2 -- 12;\n2 -- 3;\n3 -- 13;\n3 -- 4;\n4 -- 14;\n4 -- 5;\n5 -- 15;\n5 -- 6;\n6 -- 16;\n6 -- 7;\n7 -- 17;\n7 -- 8;\n8 -- 18;\n8 -- 9;\n9 -- 19;\n10 -- 20;\n10 -- 11;\n11 -- 21;\n11 -- 12;\n12 -- 22;\n12 -- 13;\n13 -- 23;\n13 -- 14;\n14 -- 24;\n14 -- 15;\n15 -- 25;\n15 -- 16;\n16 -- 26;\n16 -- 17;\n17 -- 27;\n17 -- 18;\n18 -- 28;\n18 -- 19;\n19 -- 29;\n20 -- 30;\n20 -- 21;\n21 -- 31;\n21 -- 22;\n22 -- 32;\n22 -- 23;\n23 -- 33;\n23 -- 24;\n24 -- 34;\n24 -- 25;\n25 -- 35;\n25 -- 26;\n26 -- 36;\n26 -- 27;\n27 -- 37;\n27 -- 28;\n28 -- 38;\n28 -- 29;\n29 -- 39;\n30 -- 40;\n30 -- 31;\n31 -- 41;\n31 -- 32;\n32 -- 42;\n32 -- 33;\n33 -- 43;\n33 -- 34;\n34 -- 44;\n34 -- 35;\n35 -- 45;\n35 -- 36;\n36 -- 46;\n36 -- 37;\n37 -- 47;\n37 -- 38;\n38 -- 48;\n38 -- 39;\n39 -- 49;\n40 -- 50;\n40 -- 41;\n41 -- 51;\n41 -- 42;\n42 -- 52;\n42 -- 43;\n43 -- 53;\n43 -- 44;\n44 -- 54;\n44 -- 45;\n45 -- 55;\n45 -- 46;\n46 -- 56;\n46 -- 47;\n47 -- 57;\n47 -- 48;\n48 -- 58;\n48 -- 49;\n49 -- 59;\n50 -- 60;\n50 -- 51;\n51 -- 61;\n51 -- 52;\n52 -- 62;\n52 -- 53;\n53 -- 63;\n53 -- 54;\n54 -- 64;\n54 -- 55;\n55 -- 65;\n55 -- 56;\n56 -- 66;\n56 -- 57;\n57 -- 67;\n57 -- 58;\n58 -- 68;\n58 -- 59;\n59 -- 69;\n60 -- 70;\n60 -- 61;\n61 -- 71;\n61 -- 62;\n62 -- 72;\n62 -- 63;\n63 -- 73;\n63 -- 64;\n64 -- 74;\n64 -- 65;\n65 -- 75;\n65 -- 66;\n66 -- 76;\n66 -- 67;\n67 -- 77;\n67 -- 68;\n68 -- 78;\n68 -- 69;\n69 -- 79;\n70 -- 80;\n70 -- 71;\n71 -- 81;\n71 -- 72;\n72 -- 82;\n72 -- 73;\n73 -- 83;\n73 -- 74;\n74 -- 84;\n74 -- 75;\n75 -- 85;\n75 -- 76;\n76 -- 86;\n76 -- 77;\n77 -- 87;\n77 -- 78;\n78 -- 88;\n78 -- 79;\n79 -- 89;\n80 -- 90;\n80 -- 81;\n81 -- 91;\n81 -- 82;\n82 -- 92;\n82 -- 83;\n83 -- 93;\n83 -- 84;\n84 -- 94;\n84 -- 85;\n85 -- 95;\n85 -- 86;\n86 -- 96;\n86 -- 87;\n87 -- 97;\n87 -- 88;\n88 -- 98;\n88 -- 89;\n89 -- 99;\n90 -- 91;\n91 -- 92;\n92 -- 93;\n93 -- 94;\n94 -- 95;\n95 -- 96;\n96 -- 97;\n97 -- 98;\n98 -- 99;}"

horizon = 20.0;
//states = ["S", "I", "R"];
states = ["N", "I", "V"];
//initial_distribution = [0.5, 0.5, 0];
initial_distribution = [0.9, 0.1, 0];
//rules = "I R 1.0 R S 0.7 I S I I I I 0.8";
rules = "N V 0.1 I N I I 0.5 I I N I I I 0.9 I N 0.2";
// S I R
colors = {
	"N" : "#000000",
	"I" : "#ffffff",
	"V" : "#75c44c"
}

function createGraphFromDot(dotString){
	var parsedData = vis.parseDOTNetwork(dotString);
  // create a network
  var container = document.getElementById("mynetwork");
  var data = {
    nodes: parsedData.nodes,
    edges: parsedData.edges
  };
  var options = {
		height: '100%',
		width: '100%',
		autoResize: true,
		nodes:{
			shape: 'dot',
			size: 40,
			borderWidth: 0,
			chosen: false,
			font:{
				size:0
			},
		},
		layout: {
			randomSeed: undefined,
			improvedLayout:true,
			clusterThreshold: 150,
			hierarchical: {
				enabled:false,
				levelSeparation: 150,
				nodeSpacing: 100,
				treeSpacing: 200,
				blockShifting: true,
				edgeMinimization: true,
				parentCentralization: true,
				direction: 'UD',        // UD, DU, LR, RL
				sortMethod: 'hubsize',  // hubsize, directed
				shakeTowards: 'leaves'  // roots, leaves
			}
		},
	};
	network = new vis.Network(container, data, options);
//network.on("selectNode", function (params) {
  //var selectedNodeId = params.nodes[0];
  //var node = network.body.nodes[selectedNodeId];
  //node.setOptions({
    //font: {
      //size: 20
    //}
  //});
//});
}

function visualizeOneStep(step){
	for(i = 0; i < step.length; i++){
		n = network.body.nodes[i];
		n.setOptions({
			color:{
				background: colors[step[i]]
			}
		});
	}
	network.redraw();
}


function getSimulation(){
	//prepare the json data
	json = {
		graph: selectedGraph,
		horizon: horizon,
		states: states,
		initial_distribution : initial_distribution,
		rules : rules
	}

	//combine url
	url = baseUrl + "/simulate?data=" + JSON.stringify(json);

	fetch(url)
		.then(response => response.json())
		.then(response =>{
			console.log(response)
			simulationData = response;
			stepSlider.max = simulationData.states.length - 1;
			//createGraphFromDot(simulationData.dotGraph);
			createGraphFromDot(json.graph);
			visualizeOneStep(simulationData.states[0]);
			//kelvin to celsius
			//let temp = Math.ceil(response.main.temp - 273.15);
			//document.getElementById("weather").innerHTML = temp + "ºC";
			//console.log(response.dotGraph)
		});
}

function playAnimation(){
	if(!animationPlaying){
		currentAnimationStep = 0;
		//Play the animation
		animationInterval = setInterval(function(){ 
			//This is the animation routine
			if(currentAnimationStep == simulationData.states.length - 1){
				//At the end of animation
				clearInterval(animationInterval);
				animationPlaying = false;
				return;
			}
			visualizeOneStep(simulationData.states[currentAnimationStep]);
			currentAnimationStep ++;
			stepSlider.value = currentAnimationStep;
			stepField.value = currentAnimationStep;
		}, animationLen * 1000 / simulationData.steps);

	}else{
		//stop the animation
		clearInterval(animationInterval);
		currentAnimationStep = 0;
	}
	//switch boolean
	animationPlaying = !animationPlaying;
}

stepField.value = 0;
stepSlider.min = 0;
stepSlider.max = 0;
stepSlider.addEventListener('input', function(){
	stepField.value = stepSlider.value;
	visualizeOneStep(simulationData.states[stepSlider.value]);
	//console.log(stepSlider.value);
});
stepField.addEventListener('input', function(){
	stepSlider.value = stepField.value;
	visualizeOneStep(simulationData.states[stepField.value]);
	//console.log(stepSlider.value);
});

animationDurationField.value = 10;
animationDurationSlider.value = 10;
animationDurationSlider.addEventListener('input', function(){
	animationLen = animationDurationSlider.value;
	animationDurationField.value = animationLen;
});
animationDurationField.addEventListener('input', function(){
	animationLen = animationDurationField.value;
	animationDurationSlider.value = animationLen;
});

getSimulation()