document.addEventListener("DOMContentLoaded", ()=>{
    var mainElem = document.getElementById("main"),
	userinput = document.getElementById("user"),
	codeinput = document.getElementById("passcode"),
	noteinput = document.getElementById("note"),
	reply     = document.getElementById("reply");
    var cgi = "./otp-cgi.rb";
    var userInfo = {
	"user":		null,
	"tmpkey":	null,
	"skey":		null,
	"stage":	null,
    };
    function clearStorage() {
	for (let key of Object.keys(localStorage)) {
	    if (key.match(/^otp_/)) {
		localStorage.removeItem(key);
		console.log(`localStorage[${key}] cleared`);
	    }
	}
    }
    function getMessage(str) {
	console.log(`GET: ${str}`);
	let data = JSON.parse(str);
	if (data.body) {
	    replMainHTML(data.body);
	}
	if (data.tmpkey) {
	    userInfo.tmpkey = data.tmpkey;
	    let codeinput = document.getElementById("passcode");
	    codeinput.disabled = false;
	    codeinput.value = "";
	    codeinput.placeholder = "INPUT passcode";
	    codeinput.focus();
	} else if (data.skey && data.skey > "") {
	    // 認証成功でセッションキーをGET
	    userInfo.skey = data.skey;
	    localStorage.setItem("otp_skey", data.skey);
	    document.getElementById("main").classList.remove("hidden");
	    document.getElementById("auth").classList.add("shrink");
	} else if (data.reply) {
	    // サーバから {"reply": 文字列} が来たらそれを表示
	    reply.innerText = data.reply
	}
    }
    function sendJSON(json) {
	json["user"] = json["user"]||userInfo.user;
	json["skey"] = userInfo.skey;
	json["tmpkey"] = userInfo.tmpkey;
	let jstr = JSON.stringify(json);
	console.log(`sendJSON: ${jstr}`)
	/*
	let form = new FormData();
	form.append("user", userInfo.user);
	form.append("skey", userInfo.skey);
	form.append("tmpkey", userInfo.tmpkey);
	for (let x of Object.keys(json)) {
	    form.append(x, json[x])
	    }
	*/
	fetch(cgi, {
	    method: "POST",
	    headers: {"Content-Type": 'application/json; charset=UTF-8'},
	    // body: form // jstr
	    body: jstr
	}).then((resp)=>{return resp.text();}).then((t)=>{
	    getMessage(t);
	})
    }
    function initConn() {
	userInfo["user"]	= localStorage.getItem("otp_user");
	userInfo["skey"]	= localStorage.getItem("otp_skey");
	sendJSON({});	// とりあえず送ってみる
    }
    function initListener() {
	function sendUser(e) {
	    let user = userinput.value;
	    localStorage.setItem("otp_user", user)
	    userInfo.user = user;
	    if (user.match(/.+@.+\..+/)) {
		sendJSON({});
	    }
	}
	document.getElementById("senduser").addEventListener("click", sendUser);
	userinput.addEventListener("keypress", (e)=>{
	    if (e.key=="Enter") sendUser(e);
	});
	//パスコード入力欄にヒストリがあると邪魔なので消す
	codeinput.value = "";
	function sendPasscode(e) {
	    let code = codeinput.value,
		user = localStorage.getItem("otp_user");
	    if (user.match(/.+@.+\..+/)) {
		sendJSON({
		    "user": userInfo.user,
		    "passcode": code,
		    "tmpkey": userInfo.tmpkey
		});
	    }
	}
	document.getElementById("sendcode").addEventListener("click", sendPasscode);
	codeinput.addEventListener("keypress", (e) => {
	    console.log(e.key);
	    if (e.key == "Enter")
		sendPasscode(e);
	});
	noteinput.addEventListener("keypress", (e) => {
	    if (e.key == "Enter" && noteinput.value > "") {
		sendJSON({"note": noteinput.value});
		noteinput.value = ""	// 送信したら消す
	    }
	});
	document.getElementById("clear").addEventListener(
	    "click", clearStorage);
    }
    initConn();
    initListener();
});