package watchlist

import "fmt"

templ WatchlistDropdown(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, currentStatus string, airing bool) {
	<div class="relative inline-block" id="watchlist-dropdown">
		<button class="inline-flex h-8 cursor-pointer items-center gap-2 bg-(--panel-soft) px-2 text-xs text-(--text)" onclick="toggleDropdown()" data-dropdown-trigger>
			if currentStatus != "" {
				{ formatStatus(currentStatus) }
			} else {
				Add to watchlist
			}
			<span class="text-xs">▾</span>
		</button>
		<div class="invisible absolute left-0 top-full mt-0.5 z-50 min-w-52 bg-(--panel) opacity-0 transition-opacity duration-150" data-dropdown-menu data-dropdown-open-classes="visible opacity-100" data-dropdown-closed-classes="invisible opacity-0">
			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "watching", currentStatus, airing)
			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "completed", currentStatus, airing)
			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "on_hold", currentStatus, airing)
			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "dropped", currentStatus, airing)
			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "plan_to_watch", currentStatus, airing)
			if currentStatus != "" {
				<button
					class="flex w-full cursor-pointer items-center justify-between bg-transparent px-2.5 py-2 text-left text-xs text-(--text-muted) hover:bg-(--panel-soft) hover:text-(--danger)"
					hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d", animeID))) }
					hx-target="#watchlist-dropdown"
					hx-swap="outerHTML swap:150ms"
				>Remove from list</button>
			}
		</div>
	</div>
}

templ StatusOption(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, status string, currentStatus string, airing bool) {
	<button
		class={
			"flex w-full cursor-pointer items-center justify-between bg-transparent px-2.5 py-2 text-left text-xs text-(--text-muted) hover:bg-(--panel-soft) hover:text-(--text)",
			templ.KV("bg-(--panel-soft) text-(--text)", status == currentStatus),
		}
		hx-post="/api/watchlist"
		hx-vals={ fmt.Sprintf(`{"anime_id": "%d", "anime_title": "%s", "anime_title_english": "%s", "anime_title_japanese": "%s", "anime_image": "%s", "status": "%s", "airing": "%v"}`, animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, status, airing) }
		hx-target="#watchlist-dropdown"
		hx-swap="outerHTML swap:150ms"
	>
		{ formatStatus(status) }
	</button>
}

func formatStatus(status string) string {
	switch status {
	case "watching":
		return "Watching"
	case "completed":
		return "Completed"
	case "on_hold":
		return "On hold"
	case "dropped":
		return "Dropped"
	case "plan_to_watch":
		return "Plan to watch"
	default:
		return status
	}
}