import 'bootstrap/dist/css/bootstrap.css'
import serverRequest from "./serverRequsest.js";

const $forms = document.querySelectorAll("form");

const onSubmit = (e) => {
	e.preventDefault();
	const form = e.target;

	switch (form.id) {
		case "plus" : {
			plus(form)
			break;
		}
		case "toLowerCase" : {
			tlc(form)
			break;
		}
		case "toUpperCase" : {
			tuc(form)
			break;
		}
		case "minus" : {
			minus(form)
			break;
		}
	}
}

const plus = (form) => {
	const v1 = form.v1.value;
	const v2 = form.v2.value;

	serverRequest.plus(v1, v2).then(data => {
		const $res = document.getElementById("plus_result");
		$res.innerHTML = data;
	})
}

const minus = (form) => {
	const v1 = form.v1.value;
	const v2 = form.v2.value;

	serverRequest.minus(v1, v2).then(data => {
		const $res = document.getElementById("minus_result");
		$res.innerHTML = data;
	})
}

const tlc = (form) => {
	const value = form.value.value;

	serverRequest.toLowerCase(value).then(data => {
		const $res = document.getElementById("tlc_result");
		$res.innerHTML = data;
	})
}

const tuc = (form) => {
	const value = form.value.value;

	serverRequest.toUpperCase(value).then(data => {
		const $res = document.getElementById("tuc_result");
		$res.innerHTML = data;
	})
}


$forms.forEach(item => {
	item.onsubmit = onSubmit;
})