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

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

{% block head %}
	<style>
		#content > h1 {
			text-align: center;
			width: 80%;
			margin-left: auto;
		}

		.recipes {
			font-size: 12px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: baseline;
			gap: 16px;
			width: 80%;
			margin-right: 0;
			margin-left: auto;
		}

		.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;
					}
				}
			}
		}

		#stats {
			position: fixed;
		}

		svg > text {
			stroke-width: 0;
			fill: white;
		}

		#hearty-meal-wrapper {
			text-align: center;
			width: 80%;
		}
	</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) => {
			updateStats();

			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);
								updateStats();
							}
						}
					});
				});
			});

			document
				.getElementById("hearty-meal")
				.addEventListener("click", function () {
					console.log(this);
					if (this.checked) {
						let bonusStr = Math.ceil(globalStats.str * 0.25);
						let bonusMag = Math.ceil(globalStats.mag * 0.25);
						let bonusDef = Math.ceil(globalStats.def * 0.25);
						let bonusHP = Math.ceil(globalStats.hp * 0.25);
						let bonusMP = Math.ceil(globalStats.mp * 0.25);

						let stats = {
							str: bonusStr,
							mag: bonusMag,
							def: bonusDef,
							hp: bonusHP,
							mp: bonusMP,
						};

						addStats(stats);
					} else {
						let bonusStr = Math.ceil(globalStats.str * 0.2);
						let bonusMag = Math.ceil(globalStats.mag * 0.2);
						let bonusDef = Math.ceil(globalStats.def * 0.2);
						let bonusHP = Math.ceil(globalStats.hp * 0.2);
						let bonusMP = Math.ceil(globalStats.mp * 0.2);

						let stats = {
							str: bonusStr,
							mag: bonusMag,
							def: bonusDef,
							hp: bonusHP,
							mp: bonusMP,
						};

						removeStats(stats);
						updateStats();
					}
				});
		});

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

		function selectRecipe(item, index) {
			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;
		}

		const STR_MAX = 5;
		const MAG_MAX = 5;
		const DEF_MAX = 5;
		const HP_MAX = 63;
		const MP_MAX = 50;

		const CENTER_POINT = [150, 120];

		const STR_MAX_POINT = [150, 20];
		const MAG_MAX_POINT = [50, 100];
		const DEF_MAX_POINT = [250, 100];
		const HP_MAX_POINT = [210, 210];
		const MP_MAX_POINT = [90, 210];

		function updateStats() {
			let strProgress = globalStats.str / STR_MAX;
			let magProgress = globalStats.mag / MAG_MAX;
			let defProgress = globalStats.def / DEF_MAX;
			let hpProgress = globalStats.hp / HP_MAX;
			let mpProgress = globalStats.mp / MP_MAX;

			let poly = document.getElementById("stats-mod");
			updatePoint(
				poly,
				0,
				STR_MAX_POINT,
				strProgress,
				globalStats.str,
				"stat-str",
			);
			updatePoint(
				poly,
				4,
				MAG_MAX_POINT,
				magProgress,
				globalStats.mag,
				"stat-mag",
			);
			updatePoint(
				poly,
				1,
				DEF_MAX_POINT,
				defProgress,
				globalStats.def,
				"stat-def",
			);
			updatePoint(
				poly,
				2,
				HP_MAX_POINT,
				hpProgress,
				globalStats.hp,
				"stat-hp",
			);
			updatePoint(
				poly,
				3,
				MP_MAX_POINT,
				mpProgress,
				globalStats.mp,
				"stat-mp",
			);
		}

		function updatePoint(poly, statId, max, progress, value, statElem) {
			poly.points[statId].x =
				CENTER_POINT[0] + (max[0] - CENTER_POINT[0]) * progress;
			poly.points[statId].y =
				CENTER_POINT[1] + (max[1] - CENTER_POINT[1]) * progress;

			document.getElementById(statElem).innerHTML = "+" + value;
		}
	</script>
{% endblock %}

{% block content %}
	<div id="stats">
		<svg width="360" height="430">
			{# clockwise points #}
			<polygon
				points="150,20 250,100 210,210 90,210 50,100"
				style="fill:gray;stroke:black;stroke-width:3"
			/>
			<polygon
				id="stats-mod"
				points="150,20 250,100 210,210 90,210 50,100"
				style="fill:rgba(152, 255, 224, 0.8)"
			/>
			<text x="134" y="15">STR</text>
			<text x="5" y="100">MAG</text>
			<text x="255" y="100">DEF</text>
			<text x="210" y="230">HP</text>
			<text x="60" y="230">MP</text>

			<text x="100" y="280">Strength</text>
			<text x="175" y="280" id="stat-str">+0</text>

			<text x="100" y="310">Magic</text>
			<text x="155" y="310" id="stat-mag">+0</text>

			<text x="100" y="340">Defense</text>
			<text x="170" y="340" id="stat-def">+0</text>

			<text x="100" y="370">HP</text>
			<text x="130" y="370" id="stat-hp">+0</text>

			<text x="100" y="400">MP</text>
			<text x="130" y="400" id="stat-mp">+0</text>

			<line x1="150" y1="120" x2="150" y2="20" stroke="black" />
			<line x1="150" y1="120" x2="50" y2="100" stroke="black" />
			<line x1="150" y1="120" x2="250" y2="100" stroke="black" />
			<line x1="150" y1="120" x2="210" y2="210" stroke="black" />
			<line x1="150" y1="120" x2="90" y2="210" stroke="black" />

			Sorry, your browser does not support inline SVG.
		</svg>

		<div id="hearty-meal-wrapper">
			<input type="checkbox" id="hearty-meal" name="hearty-meal" />
			<label for="hearty-meal">Hearty Meal</label>
		</div>
	</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 %}