const container = document.querySelector("#panel-container");
const file = document.querySelector("input[name=panel]");
const form = document.querySelector("form");

const submit = document.querySelector("input[type=submit]");
let panel;

form.addEventListener("submit", (e) => {
	e.preventDefault();
	form.querySelector("[name=params]").value = JSON.stringify(panel.model.params);
	form.querySelector("[name=sockets]").value = JSON.stringify(panel.model.sockets);
	form.submit();
});

file.addEventListener("change", (e) => {
	let file = e.target.files[0];

	if (file) {
		var reader = new FileReader();
		reader.readAsText(file, "UTF-8");
		reader.onload = function (evt) {
			let svg = evt.target.result;
			panel = new Panel(svg, container);
		};
		reader.onerror = function (evt) {
			console.log("error reading file");
		};
	}
});