'use strict';

let game_list = new Array();
// let game_list = [];

const verwerkSpellen = function(jsonObject) {
	let html_options = '';
    console.log(jsonObject);



	for (let spel of jsonObject) {
        addGame2Select(spel);

        game_list["" + spel.gameId] = spel.image
    }

    console.log(game_list);
};

const addGame2Select = function(spel) {
	document.querySelector(
		'.js-select-spel',
	).innerHTML += `<option value="${spel.gameId}">${spel.name}</option>`;
};

const laadSpellen = function() {
	fetch('https://www.diero.be/MCT/JSON/spellen.json')
		.then(function(response) {
			if (!response.ok) {
				//error genereren
				//throw Error("Er is een progleem opgetreden: " + response.status);
				throw Error(
					`Er is een progleem opgetreden: ${response.status}`,
				);
			} else {
				// verwerk iets
				return response.json();
			}
		})
		.then(function(jsonObject) {
			// verwerk jason
			verwerkSpellen(jsonObject);
		})
		.catch(function(error) {
			console.log(`Fout bij het verwerken json: ${error}`);
		});
};

const toonImage = function(gameId){
    document.querySelector('.js-spel').innerHTML = `<img src="${game_list[gameId]}" alt="Prentje van het spel">`
}

const init = function() {
	// Haal de spellen op
	laadSpellen();

	const html_select = document.querySelector('.js-select-spel');
	html_select.addEventListener('input', function() {
        const selectedGameId = html_select.options[html_select.selectedIndex].value;
        toonImage(selectedGameId);
	});
};

document.addEventListener('DOMContentLoaded', init);