"use strict";

import parse_summary from './lib/parse_summary.mjs';
import make_graph from './lib/make_graph.mjs';

function do_visualisation(el_in, el_out) {
	console.log(el_in, el_out);
	const source = el_in.value.trim();
	
	if(source.length === 0) return;
	
	const summary = parse_summary(source);
	console.log(summary);
	
	const svg = make_graph(summary);
	console.log(svg);
	
	const container = document.createElement("div");
	container.innerHTML = svg;
	
	el_out.replaceChildren(container);
}

window.addEventListener("load", () => {
	const el_in = document.querySelector("#input-summary");
	const el_out = document.querySelector("#output-graph");
	
	el_in.addEventListener("changed", do_visualisation.bind(this, el_in, el_out));
	el_in.addEventListener("keyup", do_visualisation.bind(this, el_in, el_out));
	
	do_visualisation(el_in, el_out);
});