package components

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

templ likeButton() {
	<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>
}

templ RecipeCardSmall(recipe domain.Recipe) {
	<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
		<img class="size-52 md:size-48 rounded-sm" src="/v1/web/static/img/recipe_placeholder.png" type="image/png"/>
		<div class="w-52 md:w-48 mt-8">
			<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
				{ recipe.Title }
			</h2>
			<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
				Serves { recipe.Serves }
			</p>
			<div class="flex items-end justify-between">
				<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
					{ recipe.Category } - { recipe.Duration.Total } mins
				</p>
				if recipe.Favorite {
					@likeButton()
				}
			</div>
			<button
				hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
				hx-trigger="click"
				hx-swap="none"
				class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
			>
				Make Now!
			</button>
		</div>
	</div>
}

templ ContentCardSmall(content, target string) {
	<div class="flex flex-col items-center justify-center rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
		<div class="mt-8 w-52 md:w-48 text-center">
			<a class="underline" href={ templ.SafeURL(target) }>
				<p class="text-sm">{ content }</p>
			</a>
		</div>
	</div>
}

templ RecipeCardLarge(recipe *domain.Recipe) {
	if recipe != nil {
		<div class="flex flex-col items-center justify-between rounded-lg border-gray-300 border shadow-md p-4 flex-shrink-0">
			<img class="size-80 rounded-sm" src="/v1/web/static/img/recipe_placeholder.png" type="image/png"/>
			<div class="w-full mt-8">
				<h2 class="font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
					{ recipe.Title }
				</h2>
				<p class="text-xs overflow-hidden whitespace-nowrap text-ellipsis">
					Serves { recipe.Serves }
				</p>
				<p class="text-sm text-wrap w-80">
					{ recipe.Description }
				</p>
				<div class="flex items-end justify-between">
					<p class="text-xs mt-4 bg-gray-200 rounded-lg w-fit px-2 py-1">
						{ recipe.Category } - { recipe.Duration.Total } mins
					</p>
					if recipe.Favorite {
						@likeButton()
					}
				</div>
				<button
					hx-post={ fmt.Sprintf(domainServer.API_ENGAGEMENT_VIEW, recipe.Id) }
					hx-trigger="click"
					hx-swap="none"
					class="w-full rounded-lg py-2 bg-gradient-to-r from-blue-400 to-blue-600 text-white mt-2 hover:ring-blue-700 hover:shadow shadow-blue-300 duration-200 cursor-pointer"
				>
					Make Now!
				</button>
			</div>
		</div>
	} else {
		<h2 class="text-2xl md:text-3xl text-gray-400">Coming soon!</h2>
	}
}
