window.addEventListener(
"DOMContentLoaded",
function () {
    var schools, filterbox, nameptn, prefradio;
    var schoolcsv = "./shochu-tohoku-niigata.csv";
    var prefcsv = "./pref.csv", prefs={};
    async function loadurl(url) {
	// return await fetch(url).then((resp) => {return resp.text()});
	return new CSV(await fetch(url).then((resp) => {return resp.text()}),
		       {header: true}).parse();;
    }
    function init() {
	// load
	fetch(schoolcsv).then((resp) => {
	    return resp.text().then((text) => {
		gentable(new CSV(text, {header: true}).parse());
	    })})
	fetch(prefcsv).then((resp) => {
	    return resp.text().then((text) => {
		for (let prow of new CSV(text, {header: true}).parse())
		    prefs[prow["pn"]] = prow["pref"];
	    })})
	filterbox = document.getElementById("nameptn");
	filterbox.addEventListener("input", (ev) => {schoolfilter(ev)});
	prefradio = document.forms[0].pref; // get name="pref" nodeList
	for (let i of document.querySelectorAll('input[name="pref"]')) {
	    i.addEventListener("input", (ev) => {schoolfilter(ev)});
	}
	nameptn = document.getElementById("nameptn");
    }
    function schoolfilter(e) {
	var str = nameptn.value,
	    tbl = document.getElementById("schools"),
	    pref= prefradio.value;
	let n=0, i=0, flag;
	reg = RegExp(str)
	console.log("nameptn=["+nameptn+"]");
	console.log("str=["+str+"]");
	for (let row of tbl.querySelectorAll("tr")) {
	    let lb = row.querySelector("label");
	    flag = "";
	    /* if (lb.textContent.match(reg)) {
		console.log(lb.textContent);
		row.setAttribute("class", "match");
		n++;
		} else */
	    if (str > "" && lb.textContent.includes(str)) {
		// console.log(lb.textContent);
		if (pref == schools[i]["prefcode"] || pref == "") {
		    flag = "match";
		    n++;
		}
	    } else {
		// row.setAttribute("class", "");
	    }
	    row.setAttribute("class", flag);
	    i++;
	}
	console.log("n="+n+", "+tbl.childNodes.length);
	
    }
    function gentable(csv) {
	schools = csv;
	var sctbl = document.getElementById("schools");
	var nSchl = 0;
	for (let s of schools) {
	    let row = document.createElement("tr"),
		col = document.createElement("td"),
		code = s["code"],
		pref = s["prefcode"],
		schl = s["schoolname"],
		labl = document.createElement("label"),
		ssel = document.createElement("input");
	    ssel.setAttribute("type", "radio");
	    ssel.setAttribute("name", "school");
	    ssel.setAttribute("value", code);
	    ssel.setAttribute("class", pref);
	    labl.innerHTML = '<input type="radio" name="school">' + schl;
	    col.appendChild(labl);
	    row.appendChild(col);
	    sctbl.appendChild(row);
	    nSchl++;
	}
	console.log("done "+nSchl);
    }
    init();
}, false);