package templates

import "fmt"
import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "github.com/haydenhargreaves/Potion/internal/domain/recipe"
import domainServer "github.com/haydenhargreaves/Potion/internal/domain/server"

templ FavoriteList(recipes []domain.Recipe) {
<div id="result-list" class="flex flex-col w-full p-4 items-center">
  for _, recipe := range recipes {
  @favoriteResult(recipe)
  }
  if len(recipes) == 0 || recipes == nil {
  <p class="text-gray-700 text-sm py-4">No results</p>
  } else {
  <p class="text-gray-700 text-sm py-4">End of results</p>
  }
</div>
}

templ favoriteResult(recipe domain.Recipe) {
<div hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) } hx-trigger="click" hx-swap="none"
  class="w-full p-2 border-b border-gray-200 hover:bg-gray-100 duration-200 flex items-center flex-col md:flex-row even:bg-[#f8f8f8] cursor-pointer">
  <img class="bg-gray-50 size-56 md:size-40 rounded-md border-0" src="" />
  <div class="text-gray-700 p-4 flex flex-col items-center md:items-start w-full">
    <div class="flex flex-col md:flex-row items-center md:items-start justify-between w-full">
      <div class="flex flex-col items-center md:items-start">
        <h3 class="text-xl font-semibold text-black pb-1">
          { recipe.Title } <span class="text-sm font-normal hidden md:inline">{ recipe.Category }</span>
        </h3>
        <div class="text-sm flex gap-x-3 gap-y-1 items-center flex-wrap">
          <span class="flex gap-x-1 align-center">
            @timeIconSm()
            { recipe.Duration.Total } min
          </span>
          <span class="flex gap-x-1 align-center">
            for _ = range(recipe.Difficulty) {
            @starIconSm(true)
            }
            for _ = range(5 - recipe.Difficulty) {
            @starIconSm(false)
            }
          </span>
          <span class="flex gap-x-1 align-center">
            @servingIconSm()
            Serves { recipe.Serves }
          </span>
        </div>
      </div>
      <div class="mb-2 mt-4 md:my-0 hidden md:block">
        <svg class="h-6 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
            fill="currentColor"></path>
        </svg>
      </div>
    </div>
    <p class="text-sm py-2 text-center md:text-left">{ recipe.Description }</p>
  </div>
</div>
}

templ FavoritesPage(filters domain.SearchFilters) {
@components.Navbar("favorites")
<div class="w-full flex justify-center">
  <div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 min-h-screen border-l border-r border-gray-300 bg-white">
    @components.BannerText("Favorites")
    @components.SearchBar(filters, false, true, true)
    <hr class="text-gray-300 w-full" />
    @FavoriteList(nil)
  </div>
</div>
}