// Initialize the echarts instance based on the prepared dom

async function initMainChart() {
	const element = document.getElementById('main-chart')
	if (element === null) {
		return;
	}

	var myChart = echarts.init(element);
	window.addEventListener('resize', function() {
		myChart.resize();
	});

	try {
		const response = await fetch("/dashboard/main-chart");
		if (!response.ok) {
			throw new Error(`Response status: ${response.status}`);
		}

		const option = await response.json();
		option.tooltip.formatter = function (params) {
			return new Date(params[0].data[0]).toLocaleString([], { day: 'numeric', month: 'short', year: 'numeric' })  +
				'<br />' +
				'Sum of Accounts: <span class="font-bold">' + params[0].data[1] + '</span> € <br />' +
				'Sum of Savings: <span class="font-bold">' + params[1].data[1] + '</span> €'
		};

		myChart.setOption(option);

		console.log("initialized main-chart");
	} catch (error) {
		console.error(error.message);
	}
}

async function initTreasureChests() {
	const element = document.getElementById('treasure-chests')
	if (element === null) {
		return;
	}

	var myChart = echarts.init(element);
	window.addEventListener('resize', function() {
		myChart.resize();
	});

	try {
		const response = await fetch("/dashboard/treasure-chests");
		if (!response.ok) {
			throw new Error(`Response status: ${response.status}`);
		}

		const option = await response.json();
		myChart.setOption(option);

		console.log("initialized treasure-chests");
	} catch (error) {
		console.error(error.message);
	}
}

async function initTreasureChest() {
	const element = document.getElementById('treasure-chest')
	if (element === null) {
		return;
	}

	var myChart = echarts.init(element);
	window.addEventListener('resize', function() {
		myChart.resize();
	});


	const treasureChestSelect = document.getElementById('treasure-chest-id')
	treasureChestSelect.addEventListener("change", async (e) => {
		try {
			const response = await fetch("/dashboard/treasure-chest?id="+e.target.value);
			if (!response.ok) {
				throw new Error(`Response status: ${response.status}`);
			}
		
			const option = await response.json();
			option.tooltip.formatter = function (params) {
				return new Date(params[0].data[0]).toLocaleString([], { day: 'numeric', month: 'short', year: 'numeric' })  +
					'<br />' +
					'Sum of Accounts: <span class="font-bold">' + params[0].data[1] + '</span> €'
			};

			myChart.setOption(option);
		} catch (error) {
			console.error(error.message);
		}
	});

	console.log("initialized treasure-chest");
}

initMainChart();
initTreasureChests();
initTreasureChest();