<script>
	import { onMount } from "../../../node_modules/svelte/internal";
	import icon from "$lib/images/wheels.svg"

	let backend_url = "https://home.blackfinn.de/api/bicycle";
	// let backend_url = "http://localhost:5000/api/bicycle";

	let year = 2023;
	let total_distance_value = 0.0;
	let total_distance_unit = "m"
	let year_result_value = 0.0;
	let year_result_unit = "m"

	function get_api() {
		fetch(backend_url)
		.then(response => response.json())
		.then(data => {
			console.log(data.Years[year])
			total_distance_value = data.Years[year].total_distance.value
			total_distance_unit = data.Years[year].total_distance.unit
			year_result_value = data.Years[year].year_result.value
			year_result_unit = data.Years[year].year_result.unit
		}).catch(error => {
			console.log(error);
			return [];
		});
	}

	setInterval(() => {
		get_api();
	}, 1000)

	onMount(async () => {
		get_api();
	});
</script>

<svelte:head>
	<title>Bicycle</title>
	<meta name="description" content="Bicycle"/>
</svelte:head>

<section id='content_id' class='content'>
	<h1>Bicycle</h1>
	<figure>
		<img src={icon} alt="Bicycle" width=150/>
	</figure>
	<h1>Total distance: {total_distance_value} {total_distance_unit}</h1>
	<h1>Year result: {year_result_value} {year_result_unit}</h1>
</section>
