package templates

import (
	"mal/internal/jikan"
	"fmt"
	"net/url"
)

templ Search(q string) {
	@Layout("mal - search") {
		if q != "" {
			<div class="loading-indicator htmx-indicator" id="loading">
				<div class="loading-dot"></div>
				<div class="loading-dot"></div>
				<div class="loading-dot"></div>
				<span>searching</span>
			</div>
			<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
		} else {
			<div class="empty-state">
				<div class="empty-state-title">search for anime</div>
				<div class="empty-state-text">use the search bar above to find anime to add to your watchlist</div>
			</div>
		}
	}
}

templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
	if len(animes) == 0 {
		<div class="empty-state">
			<div class="empty-state-title">no results found</div>
			<div class="empty-state-text">try a different search term</div>
		</div>
	} else {
		<div class="catalog-grid">
			@SearchItems(query, animes, nextPage, hasNext)
		</div>
	}
}

templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
	for i, anime := range animes {
		if i == len(animes)-1 && hasNext {
			<div class="catalog-item" hx-get={ string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))) } hx-trigger="revealed" hx-swap="afterend">
				@CatalogItem(anime)
			</div>
		} else {
			<div class="catalog-item">
				@CatalogItem(anime)
			</div>
		}
	}
}