package ui

import (
	"fmt"
	"mal/integrations/jikan"
)

templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, containerID string) {
	for _, anime := range animes {
		<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
			@CatalogItem(anime)
		</div>
	}
	if hasNext {
		<div class="col-span-full h-px w-full" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
	}
	<script data-container={ containerID }>
		const containerId = document.currentScript.getAttribute('data-container');
		const container = document.getElementById(containerId) || document;
		const seen = new Set();
		container.querySelectorAll('[data-id]').forEach(item => {
			const id = item.getAttribute('data-id');
			if (id && seen.has(id)) {
				item.remove();
			} else if (id) {
				seen.add(id);
			}
		});
	</script>
}

templ CatalogItem(anime jikan.Anime) {
	@AnimeCard(AnimeCardProps{
		ID:       anime.MalID,
		Title:    anime.DisplayTitle(),
		ImageURL: anime.ImageURL(),
	})
}