"use strict";

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

function do_visualisation() {
	const el_in = document.querySelector("#input-summary");
	const el_out = document.querySelector("#output-graph");
	const el_link_source = document.querySelector("#button-download-source");
	const el_link_svg = document.querySelector("#button-download-svg");
	
	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 result = make_graph(summary);
	
	const container = document.createElement("div");
	container.innerHTML = result.svg;
	
	el_out.replaceChildren(container);
	
	el_link_source.setAttribute("href", `data:text/plain;base64,${btoa(result.source)}`);
	el_link_source.setAttribute("download", "model.nomnoml");
	el_link_svg.setAttribute("href", `data:text/plain;base64,${btoa(result.svg)}`);
	el_link_svg.setAttribute("download", "model.svg");
}

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