async function getCrafts() {
	
	const res = await fetch("./data/crafts.json");
	const data = await res.json();
	
	return data;
};

async function getCollections() {
	
	const res = await fetch("./data/collections.json");
	const data = await res.json();
	
	return data;
};

function updateSelectedCollection (selected = 0) {
	
	var previouslySelectedCollection = document.querySelector('#collections nav ul li.selected');
	
	if (previouslySelectedCollection != null) {
	
		previouslySelectedCollection.classList.remove('selected');
	}
	
	
	var collections = document.querySelectorAll('#collections nav ul li');
	
	console.log(collections);
	
	var newlySelectedCollection = collections[selected];
	
	console.log(newlySelectedCollection);
	
	newlySelectedCollection.classList.add('selected');
	
}

async function printCollections (crafts, collections) {
	
	var collectionsElt = document.getElementById('collections');
	var collectionsNavElt = collectionsElt.querySelector('nav ul');
	
	collectionsNavElt.innerHTML = '';
	
	var cssClass = '';
	
	collections.forEach(function (collection, index) {
		
		if (collection.items != undefined) {
			
			cssClass = '';
			
			collectionsNavElt.innerHTML += 
				'<li' + cssClass + '>' +
					'<a href="#" ' +
					   'title="' + collection.name + '" ' + 
					'>' +
					
						'<img src="data/img/' + collection.img + '" ' +
						     'alt="' + collection.name + '" ' + 
						'/>' + 
					'</a>' +
				'</li>';
		}
	});
	
	displayCollection(crafts, collections);
			
	collectionsElt.querySelectorAll('li').forEach(function (elt, index) {
		
		elt.addEventListener('click', function () {
		
			console.log(index);
			
			displayCollection(crafts, collections, index);
			
		});
		
	});
}

async function displayCollection (crafts, collections, collectionId = 0) {
	
	updateSelectedCollection(collectionId);
	
	itemsListElt = document.querySelector('#collections .items-list');
	
	itemsListElt.innerHTML = '';
	
	collections[collectionId].items.forEach(function (itemId){
		
		itemsListElt.innerHTML +=
			'<li>' + 
				'<a href="#" ' +
				   'onclick="displayRecipe('+ itemId + ', 0)" ' + 
				   'title="' + crafts[itemId].name + '" ' + 
				'>' +
				
					'<img src="data/img/' + crafts[itemId].img + '" ' +
						 'alt="' + crafts[itemId].name + '" ' + 
					'/>' + 
				'</a>' +
			'</li>';
	});
}


async function printItemsList () {
	
	crafts = await getCrafts();
	
	itemsListElt = document.getElementById('items-list');
	
	crafts.forEach(function (item, index) {
		
		if (item.recipes != undefined) {
			
			itemsListElt.innerHTML += 
				'<li>' + 
					'<a href="#" ' +
					   'onclick="displayRecipe('+ index + ', 0)" ' + 
					   'title="' + item.name + '" ' + 
					'>' +
					
						'<img src="data/img/' + item.img + '" ' +
						     'alt="' + item.name + '" ' + 
						'/>' + 
					'</a>' +
				'</li>';
		}
	});
	
	
}


function padIngredient (nbIngredients, str) {
	
	if (nbIngredients <= 1 || 
	    nbIngredients == 4 || 
	    nbIngredients == 9 || 
	    nbIngredients == 16) {
		
		return '';
	
	} else if (nbIngredients < 4) {
		
		return str.repeat(4 - nbIngredients);
		
	} else if (nbIngredients < 9) {
		
		return str.repeat(9 - nbIngredients);
	
	} else if (nbIngredients < 16) {
		
		return str.repeat(16 - nbIngredients);
	
	} else if (nbIngredients < 25) {
		
		return str.repeat(25 - nbIngredients);
	}
}

async function displayRecipe (itemId, recipeId = 0, elementId = 'recipe-main', bc_item = null, bc_recipe = null) {
	
	crafts = await getCrafts();
	
	recipeElt = document.getElementById(elementId);
	ingredientsElt = recipeElt.querySelector('.ingredients');
	actionElt = recipeElt.querySelector('.action');
	resultElt = recipeElt.querySelector('.result');
	itemNameElt = recipeElt.querySelector('.item-name');
	otherRecipesElt = recipeElt.querySelector('.other-recipes ul');
	detailsElt = recipeElt.querySelector('.recipe-details');
	detailsContentElt = detailsElt.querySelector('div');
	
	actionElt.innerHTML = '<a href="#">&nbsp;</a>';
	resultElt.innerHTML = "&nbsp;";
	otherRecipesElt.innerHTML = "";
	detailsContentElt.innerHTML = "";
	
	recipeElt.style.visibility = 'visible';
	detailsElt.style.visibility = 'hidden';
	
	itemNameElt.innerHTML = '' + crafts[itemId].name + '';
	
	resultElt_content = 
		'<img src="data/img/' + crafts[itemId].img + '" ' +
			 'alt="' + crafts[itemId].name + '" ' + 
			 'title="' + crafts[itemId].name + '" ' + 
			 '/>';
	
	if (elementId == 'recipe-aux' && bc_item != null) {
		
		resultElt_content = 
			'<a href="#" ' + 
			   'onclick="displayRecipe(' + bc_item + ', ' + bc_recipe +', \'recipe-aux\')" ' + 
			'>' +
				resultElt_content + 
			'</a>';
	}
	
	resultElt.innerHTML = resultElt_content;
	
	blackHoleStr = '<li class="ingredient"><img src="data/img/black-hole.png" /></li>';
	
	
	
	if (crafts[itemId].recipes == undefined) {
		
		ingredientsElt.innerHTML = blackHoleStr;
			
	
	} else {
		
		recipes = crafts[itemId].recipes;
			
		ingredients = recipes[recipeId].ingredients;
		
		if (ingredients == undefined) {
			
			ingredientsElt.innerHTML = blackHoleStr;
			
		} else {
		
			ingredientsElt.innerHTML = '';
			
			nbIngredients = ingredients.length;
			
			ingredientsElt.className = 'ingredients ';
			
			if (nbIngredients > 16) {
					
				ingredientsElt.className += "grid-25";
				
			} else if (nbIngredients > 9) {
					
				ingredientsElt.className += "grid-16";
				
			} else if (nbIngredients > 4) {
					
				ingredientsElt.className += "grid-9";
				
			} else if (nbIngredients > 1) {
					
				ingredientsElt.className += "grid-4";
			
			} else {
				
				ingredientsElt.className += "";
				
			}
			
			var i = 1;
			
			console.log(ingredients);
			
			ingredients.forEach (function (ingredient) {
				
				unit = (ingredient.unit != undefined) ? (' ' + ingredient.unit) : '';
				
				qty = (ingredient.qty == undefined) ? '' : '<span class="qty">' + ingredient.qty + '</span>';
				 
				title = 
					(ingredient.qty == undefined) ? 
						crafts[ingredient.ref].name : (
						(ingredient.unit == undefined) ?
							ingredient.qty + ' ' + crafts[ingredient.ref].name : 
							ingredient.qty + ' ' + ingredient.unit + ' de ' + crafts[ingredient.ref].name
						);
							
				
				// displayOn = (elementId == 'recipe-main') ? 'recipe-aux' : 'recipe-main';
				displayOn = 'recipe-aux';
				
				if (elementId == 'recipe-aux') {
					
					bc_item = itemId;
					bc_recipe = recipeId;
				
				} else {
					
					bc_item = null;
					bc_recipe = null;
				}
				
				ingredientsElt.innerHTML += 
					'<li class="ingredient">' + 
						qty + 
						'<a href="#" ' + 
						   'onclick="displayRecipe('+ ingredient.ref  + ', 0, \'' + displayOn + '\', '+ bc_item +', '+ bc_recipe + ')"' + 
						   'title="' + title + '"' + 
						'>' +
							'<img src="data/img/' + crafts[ingredient.ref].img + '" ' +
								 'alt="' + crafts[ingredient.ref].name + '" ' + 
								 '/>' + 
						'</a>' + 
					'</li>';
					
				i++;
			});
			
			
			ingredientsElt.innerHTML += padIngredient(nbIngredients, '<li class="ingredient"></li>');
		}
		
		
		
		action = (recipes[recipeId].action == undefined) ? '' : recipes[recipeId].action;
		
		if (recipes[recipeId].details != undefined) {
			
			actionElt.className += ' has-details';
		}
		
		actionElt.innerHTML = 
			'<a href="#" ' + 
			   'onclick="showDetails(\'' + elementId + '\', \'' + recipeId + '\')" ' +
			'>'+ 
				action + 
			'</a>';
		
		
		if ((details = crafts[itemId].recipes[recipeId].details) != undefined) {
			
			detailsContentElt.innerHTML = details;
		}
		
		nbRecipes = recipes.length;
		
		if (nbRecipes == 1) {
			
			if (recipes[0].name != undefined) {
				
				otherRecipesElt.innerHTML += 
					'<li>' +
						'<strong>' + 
							recipes[0].name + 
						'</strong>' +
					'</li>';
			
			}
			
		} else if (nbRecipes > 1) {
			
			for (i = 0; i < nbRecipes; i++) {
				
				otherRecipeName = (recipes[i].name != undefined) ? 
					recipes[i].name :
					"recette n°" + (i + 1);
					
				if (i == recipeId) {
					
					otherRecipesElt.innerHTML += 
						'<li>' +
							'<strong>' + 
								otherRecipeName + 
							'</strong>' +
						'</li>';
					
				} else {
					
					otherRecipesElt.innerHTML += 
						'<li>' + 
							'<a href="#" ' +
								'onclick="displayRecipe(' + itemId + ', ' + i + ', \''+ elementId + '\')">' + 
								otherRecipeName + 
							'</a>'
						'</li>';
				}
			}
		}
	}
}

showDetails = function (elementId) {
	
	detailsElt = document.querySelector('#' + elementId + ' .recipe-details');
	detailsElt.style.visibility = "visible";
}

// printItemsList();

window.addEventListener('load', async function () {
	
	const crafts = await getCrafts();
	
	const collections = await getCollections();
	
	printCollections(crafts, collections);
});