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');
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];
		//console.log(step[i])
		if(step[i][0] == 0){
			n.setOptions({
				color:{
					background: "#0000ff",
				}
			});
		}else{
			n.setOptions({
				color:{
					background: "#ff0000",
				}
			});
		}
	}
	network.redraw();
}


function getSimulation(){
	fetch("http://localhost/simulate")
		.then(response => response.json())
		.then(response =>{
			simulationData = response;
			stepSlider.max = simulationData.steps - 1;
			createGraphFromDot(simulationData.dotGraph);
			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.steps){
				//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()