package components

templ dropdownButton(content, name, value string) {
	<label class="inline-block cursor-pointer">
		<input type="checkbox" name={ name } value={ value } class="sr-only peer"/>
		<span
			class="peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600
    px-2 py-1 border border-gray-300 rounded-lg"
		>
			{ content }
		</span>
	</label>
}

templ FilterDropdown() {
	<script>
  function toggleDropdown() {
    const menu = document.getElementById("filter-dropdown-menu");
    const button = document.getElementById("filter-dropdown-button");

    if (menu.classList.contains("block")) {
      menu.classList.remove("block");
      menu.classList.add("hidden");
    } else {
      menu.classList.remove("hidden");
      menu.classList.add("block");
    }
  }
</script>
	<div id="filter-dropdown-menu" class="hidden w-full p-2 border border-gray-300 my-2 rounded-lg">
		<div class="w-full border-b border-gray-300 py-2">
			<h3 class="mb-1">
				Meal
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("Breakfast", "meal", "1")
				@dropdownButton("Lunch", "meal", "2")
				@dropdownButton("Dinner", "meal", "4")
				@dropdownButton("Desert", "meal", "8")
				@dropdownButton("Snack", "meal", "16")
				@dropdownButton("Side", "meal", "32")
				@dropdownButton("Other", "meal", "64")
			</div>
		</div>
		<div class="w-full border-b border-gray-300 py-2">
			<h3 class="mb-1">
				Cook Time
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("< 15 min", "time", "1")
				@dropdownButton("15 to 30 min", "time", "2")
				@dropdownButton("30 to 60 min", "time", "4")
				@dropdownButton("60 to 120 min", "time", "8")
				@dropdownButton("+120 min", "time", "16")
			</div>
		</div>
		<div class="w-full border-b border-gray-300 py-2">
			<h3 class="mb-1">
				Difficulty
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("Beginner", "difficulty", "1")
				@dropdownButton("Easy", "difficulty", "2")
				@dropdownButton("Intermediate", "difficulty", "4")
				@dropdownButton("Challenging", "difficulty", "8")
				@dropdownButton("Extreme", "difficulty", "16")
			</div>
		</div>
		<div class="w-full border-b border-gray-300 py-2">
			<h3 class="mb-1">
				Serving Size
			</h3>
			<div class="flex text-xs flex-wrap gap-1">
				@dropdownButton("1 to 2", "serving", "1")
				@dropdownButton("2 to 4", "serving", "2")
				@dropdownButton("4 to 6", "serving", "4")
				@dropdownButton("6 to 8", "serving", "8")
				@dropdownButton("8+", "serving", "16")
			</div>
		</div>
	</div>
}