import { check_compose } from "/static/scripts/compose.js";

/**
 * Makes the form require the stack to be checked before submitting
 * @param form 
 * @param editor 
 */
export function add_check(form: HTMLFormElement, editor: AceAjax.Editor) {
	form.addEventListener("submit", (ev) => {
		ev.preventDefault();
		check_stack(editor).then((result) => {
			if (result) {
				form.submit();
			}
		})
		return false;
	});
}

/**
 * Runs the check function and updates some DOM elements
 * @param editor Editor instance
 * @returns true if the stack is valid, false otherwise
 */
export async function check_stack(editor: AceAjax.Editor) {
	const source = editor.getValue();
	const check_result = await check_compose(source);

	const editorEl = document.querySelector(".ace_editor")!;
	const editorErrorEl = document.querySelector<HTMLDivElement>("#editor-form div.error")!;
	editorEl.classList.remove("err", "checked");
	editorErrorEl.style.display = "block";
	editorErrorEl.classList.add("pending");
	editorErrorEl.innerHTML = "Checking...";
	if (check_result.ok) {
		editorEl.classList.add("checked");
		editorErrorEl.style.display = "";
	} else {
		editorEl.classList.add("err");
		editorErrorEl.classList.remove("pending");
		editorErrorEl.innerHTML = check_result.error.message;
	}
	return check_result.ok;
}