package watchlist

import (
	"fmt"

	"mal/web/shared"
)

templ CardButton(
	animeID int,
	title string,
	titleEnglish string,
	titleJapanese string,
	imageURL string,
	airing bool,
	inWatchlist bool,
) {
	<button
		class={ "cursor-pointer border-0 bg-transparent p-0", templ.KV("text-white", inWatchlist), templ.KV("text-white hover:text-white/70", !inWatchlist) }
		if inWatchlist {
			hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d?from=card", animeID))) }
		} else {
			hx-post="/api/watchlist/card"
			hx-vals={ shared.HxVals(map[string]interface{}{
				"anime_id": animeID,
				"anime_title": title,
				"anime_title_english": titleEnglish,
				"anime_title_japanese": titleJapanese,
				"anime_image": imageURL,
				"airing": airing,
			}) }
		}
		hx-target="this"
		hx-swap="outerHTML"
		hx-on::after-swap="window.location.reload()"
		aria-label={ getWatchlistLabel(inWatchlist) }
	>
		<svg width="24" height="24" viewBox="0 0 24 24" fill={ getWatchlistFill(inWatchlist) } xmlns="http://www.w3.org/2000/svg">
			<title>{ getWatchlistLabel(inWatchlist) }</title>
			<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
		</svg>
	</button>
}

func getWatchlistFill(inWatchlist bool) string {
	if inWatchlist {
		return "currentColor"
	}
	return "none"
}

func getWatchlistLabel(inWatchlist bool) string {
	if inWatchlist {
		return "In watchlist"
	}
	return "Add to watchlist"
}