package watchlist

import (
	"fmt"

	"mal/web/shared"
)

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
			type="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, "completed", 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
					type="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={ shared.HxVals(map[string]interface{}{
			"anime_id": animeID,
			"anime_title": animeTitle,
			"anime_title_english": animeTitleEnglish,
			"anime_title_japanese": animeTitleJapanese,
			"anime_image": animeImage,
			"status": status,
			"airing": airing,
		}) }
		hx-target="#watchlist-dropdown"
		hx-swap="outerHTML swap:150ms"
	>
		{ formatStatus(status) }
	</button>
}

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