let category = document.getElementById("category-select");
let productname = document.getElementById("productname-select");
let category_data = "";
let productname_data = "";
let productname_data_infos = "";

let result_end = document.getElementById("result_end");
let result_no = document.getElementById("result_no");
let result_supportend = document.getElementById("result_supportend");
let result_price = document.getElementById("result_price");

function format_with_regex(number) {
	return !(number + '').includes('.')
		?
		(number + '').replace(/\d{1,3}(?=(\d{3})+$)/g, (match) => {
			return match + ',';
		})
		: (number + '').replace(/\d{1,3}(?=(\d{3})+(\.))/g, (match) => {
			return match + ',';
		});
}

function showResult(obj, isShow) {
	isShow
		? (obj.classList.remove('tag_hide'), obj.classList.add('tag_display'))
		: (obj.classList.remove('tag_display'), obj.classList.add('tag_hide'))
}

async function setSelectOption(select_num, selected_key, select_obj) {
	let filename = "";
	let data = "";
	let isfetch = false;
	switch (select_num) {
		case 1:
			category_data == ""
				? (isfetch = true, filename = "TypeNum.json")
				: data = category_data;
			break;
		case 2:
			productname_data == ""
				? (isfetch = true, filename = "ProductName.json")
				: data = productname_data;
			break;
	}
	if (isfetch) {
		let current_domain = location.hostname;
		let protocol = location.protocol;
		let port = location.port && location.port != '80' ? ':' + location.port : '';
		fetch(protocol + "//" + current_domain + port + "/-/media/cojp/product/support_info/json/repair_serv/mprint/" + filename)
			.then((response) => response.json())
			.then((data) => {
				addOption(select_num, selected_key, select_obj, data);
			}).catch((error) => console.error(error));
	} else {
		addOption(select_num, selected_key, select_obj, data);
	}
}
function addOption(select_num, selected_key, select_obj, data) {
	let option_groups = data.option_groups;
	let option_group = null;
	if (select_num == 1) {
		option_group = option_groups;
	} else {
		option_group = option_groups.filter((value) => { return value.option_parent === selected_key; });
	}
	let options = option_group[0].options;
	options.forEach(option => {
		select_obj.add(new Option(option.value, option.key));
	});

	if (select_num == 2) {
		productname_data_infos = options;
	}
}

function initSelectObj(n) {
	if (n == 0) {
		category.options.length = 0;
		category.add(new Option("--", "00", true));
		// 型番内容の設定
		setSelectOption(1, "", category)
	}
	if (n == 0 || n == 1) {
		productname.options.length = 0;
		productname.add(new Option("項目1回答後、ご選択ください", "00_00", true));
	}


	showResult(result_end, false);
	showResult(result_no, true);
	showResult(result_supportend, false);
	showResult(result_price, false);

}

document.addEventListener("DOMContentLoaded", (event) => {
	// 初期設定
	initSelectObj(0);

	// changeイベントリスナー
	category.addEventListener("change", (e) => {
		initSelectObj(1);
		let index = e.target.selectedIndex;
		let key = e.target.options[index].value;
		setSelectOption(2, key, productname);
	});
	
	productname.addEventListener("change", (e) => {
		initSelectObj(2);
		let index = e.target.selectedIndex;
		let key = e.target.options[index].value;
		let option = productname_data_infos.filter((value) => { return value.key === key; })
		let info = option[0].info;
		// 修理が終了している場合は、終了している旨のメッセージだけ表示
		if (info.period == "end") {
			showResult(result_end, false);
			showResult(result_no, false);
			showResult(result_supportend, true);
			showResult(result_price, false);
		// 修理がまだ続いている場合は、料金一覧表を表示
		} else {
			let a = document.getElementsByClassName("repair_cost_a"); // 調整のみ
			let b = document.getElementsByClassName("repair_cost_b"); // 一般部品交換修理
			let c = document.getElementsByClassName("repair_cost_c"); // 特定部品交換修理
			let e = document.getElementsByClassName("repair_cost_e"); // 送料
			let f = document.getElementsByClassName("repair_cost_f"); // 合計額：調整のみ
			let g = document.getElementsByClassName("repair_cost_g"); // 合計額：一般部品交換修理
			let h = document.getElementsByClassName("repair_cost_h"); // 合計額：特定部品交換修理


			a[0].innerHTML = a[1].innerHTML = info.RepairCostA == "対象外"  || info.RepairCostA == "サポート終了"
				? info.RepairCostA
				: "¥" + format_with_regex(parseInt(info.RepairCostA)).toString();
			b[0].innerHTML = b[1].innerHTML = info.RepairCostB == "対象外"  || info.RepairCostB == "サポート終了"
				? info.RepairCostB
				: "¥" + format_with_regex(parseInt(info.RepairCostB)).toString();
			c[0].innerHTML = c[1].innerHTML = info.RepairCostC == "対象外"  || info.RepairCostC == "サポート終了"
				? info.RepairCostC
				: "¥" + format_with_regex(parseInt(info.RepairCostC)).toString();
			e[0].innerHTML = e[1].innerHTML = info.shipping == "対象外"
				? info.shipping
				: "¥" + format_with_regex(parseInt(info.shipping)).toString(); info.shipping;

			f[0].innerHTML = f[1].innerHTML = info.SumCostA == "対象外" || info.SumCostA == "サポート終了"
				? info.SumCostA
				: "¥" + format_with_regex(parseInt(info.SumCostA)).toString();
			g[0].innerHTML = g[1].innerHTML = info.SumCostB == "対象外"  || info.SumCostB == "サポート終了"
				? info.SumCostB
				: "¥" + format_with_regex(parseInt(info.SumCostB)).toString();
			h[0].innerHTML = h[1].innerHTML = info.SumCostC == "対象外"  || info.SumCostC == "サポート終了"
				? info.SumCostC
				: "¥" + format_with_regex(parseInt(info.SumCostC)).toString();


			showResult(result_end, false);
			showResult(result_no, false);
			showResult(result_supportend, false);
			showResult(result_price, true);
		}


		// PJシリーズのみ表の表記を変更
		if (info.RepairType == "typeB") {
			for(let i = 0; i < 4; i++) {
				document.getElementsByClassName("graph_a")[i].innerHTML = "一般部品交換修理及び調整";
				document.getElementsByClassName("graph_b")[i].innerHTML = "特定部品交換修理（1点交換）";
				document.getElementsByClassName("graph_c")[i].innerHTML = "特定部品交換修理（2点交換）";
			}
		} else {
			for(let i = 0; i < 4; i++) {
				document.getElementsByClassName("graph_a")[i].innerHTML = "調整のみ";
				document.getElementsByClassName("graph_b")[i].innerHTML = "一般部品交換修理";
				document.getElementsByClassName("graph_c")[i].innerHTML = "特定部品交換修理";
			}
		}


		// 修理サービスの終了が近づいているとき
		if (info.period == "soon") {
			showResult(result_end, true);
		}

	});

});