"use strict";

const form = document.getElementById("predictionForm");
form.addEventListener("submit", async (e) => {
	e.preventDefault();

	const sequence = document.getElementById("sequence").value;
	const smiles = document.getElementById("smiles").value;

	const response = await fetch("/api/predict", {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
			"Accept": "application/json",
		},
		body: JSON.stringify({ sequence, smiles }),
	});

	const data = await response.json();
	const predictionResults = document.getElementById("predictionResults");

	// unhide the results
	predictionResults.style.display = "block";

	predictionResults.innerHTML = `
		<h2>Prediction Results</h2>
		<p><strong>Km:</strong> ${data.km}</p>
		<p><strong>Kcat:</strong> ${data.kcat}</p>
		<p><strong>Vmax:</strong> ${data.vmax}</p>`;
});