{% extends "layouts/base.html" %}

{% block title %}Recipes{% endblock %}

{% block head %}
	<style>
		#content > h1 {
			text-align: center;
		}

		.recipes {
			font-size: 12px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: baseline;
			gap: 16px;
		}

		.recipe {
			width: 20%;
			align-self: stretch;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
			padding: 16px;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.ingredients {
				margin-left: 16px;
			}

			.stats {
				table {
					tr.plus {
						color: gold;
					}

					th {
						padding: 8px;
					}

					td {
						background-color: #4d4d4d;
					}
				}
			}
		}
	</style>
	<script>
		let globalStats = { str: 0, mag: 0, def: 0, hp: 0, mp: 0 };
		const types = ["starters", "soups", "fish", "meat", "deserts"];
		let typeItem = [];
		let hasSelection = [false, false, false, false, false];
		document.addEventListener("DOMContentLoaded", (event) => {
			types.forEach(function (type, typeIdx) {
				const recipes = document.querySelectorAll(
					"div.recipes." + type + " .recipe",
				);

				recipes.forEach(function (item, index) {
					item.addEventListener("click", function () {
						if (!hasSelection[typeIdx]) {
							hasSelection[typeIdx] = true;
							selectRecipe(item, typeIdx);
						} else {
							if (typeItem[typeIdx] != item) {
								unselectRecipe(typeIdx);
								selectRecipe(item, typeIdx);
							} else {
								hasSelection[typeIdx] = false;
								unselectRecipe(typeIdx);
							}
						}
					});
				});
			});

			function unselectRecipe(index) {
				typeItem[index].style["box-shadow"] =
					"0px 0px 10px rgba(0, 0, 0, 0.4)";
			}

			function selectRecipe(item, index) {
				if (typeItem[index] != undefined) {
					let prevStats = JSON.parse(
						typeItem[index].dataset["stats"],
					);
					removeStats(prevStats);
				}

				typeItem[index] = item;
				item.style["box-shadow"] = "0px 0px 10px rgba(0, 255, 0, 0.8)";

				let stats = JSON.parse(item.dataset["stats"]);
				addStats(stats);
			}

			function addStats(stats) {
				globalStats.str += stats.str;
				globalStats.mag += stats.mag;
				globalStats.def += stats.def;
				globalStats.hp += stats.hp;
				globalStats.mp += stats.mp;
				updateStats();
			}

			function removeStats(stats) {
				globalStats.str -= stats.str;
				globalStats.mag -= stats.mag;
				globalStats.def -= stats.def;
				globalStats.hp -= stats.hp;
				globalStats.mp -= stats.mp;
			}

			function updateStats() {
				const elem = document.getElementById("stats");
				console.log(elem);
			}
		});
	</script>
{% endblock %}

{% block content %}
	<div id="stats"></div>

	<h1>Starters</h1>
	<div class="recipes starters">
		{% for recipe in recipes.starters %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Soups</h1>
	<div class="recipes soups">
		{% for recipe in recipes.soups %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Fish Dishes</h1>
	<div class="recipes fish">
		{% for recipe in recipes.fish %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Meat Dishes</h1>
	<div class="recipes meat">
		{% for recipe in recipes.meat %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>

	<h1>Deserts</h1>
	<div class="recipes deserts">
		{% for recipe in recipes.deserts %}
			{% include "components/kh3/recipe.html" %}
		{% endfor %}
	</div>
{% endblock %}