package pages

import (
	"fmt"
	"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/components/gallery"
	"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/pkg/templer"
	"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/web/components"
)

const detailsID = "imgs-details"

templ GallerySet(g gallery.Set) {
	<div class="p-5">
		@components.Modal(detailsID) {
			@GalleryImage(g.SM.Images[0].UID, &gallery.Image{}, &gallery.Image{})
		}
		<div
			class="grid gap-5 grid-cols-1 lg:hidden"
		>
			for _,img := range g.SM.Images {
				<img
					src={ "/images/" + img.UID + "?w=600" }
					loading="lazy"
					class="w-full"
					alt="Gallery item"
				/>
			}
		</div>
		<div class="hidden lg:block 3xl:hidden">
			@Gallery(g.SM)
		</div>
		<div class="hidden 3xl:block 6xl:hidden">
			@Gallery(g.LG)
		</div>
		<div class="hidden 6xl:block">
			@Gallery(g.XLG)
		</div>
	</div>
}

templ GalleryImage(image string, next *gallery.Image, prev *gallery.Image) {
	if next != nil {
	}
	<div>
		<div class="relative inline-block w-full overflow-hidden">
			<!-- 1. Preloaded Base Image (w=800) -->
			<img
				src={ "/images/" + image + "?w=800" }
				alt=""
				class="block w-full h-auto"
			/>
			<!-- 2. Responsive Image Layer (Overlaid on top) -->
			<img
				src={ "/images/" + image + "?w=800" }
				srcset={ "/images/" + image + "?w=400 400w, /images/" + image + "?w=800 800w, /images/" + image + "?w=1200 1200w, /images/" + image + "?w=1600 1600w" }
				sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
				alt="Image description"
				onload="this.classList.remove('opacity-0')"
				class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300"
			/>
			<!-- 3. Navigation Controls -->
			if prev != nil {
				<button class="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 text-white">
					&lt;
				</button>
			}
			if next != nil {
				<button class="absolute right-4 top-1/2 -translate-y-1/2 z-10 text-white">
					&gt;
				</button>
			}
		</div>
	</div>
}

templ Gallery(g gallery.Gallery) {
	<div
		class="grid gap-5"
		style={ fmt.Sprintf("grid-template-columns: repeat(%d, 1fr); grid-template-rows: repeat(%d, auto);", g.GridWith, g.GridHeight) }
	>
		for _, img := range g.Images {
			<div
				style={ fmt.Sprintf("grid-column: %d / span %d; grid-row: %d / span %d;aspect-ratio: %d / %d;", img.X+1, img.Width, img.Y+1, img.Height, img.Width, img.Height) }
				class="overflow-hidden shadow-sm"
			>
				<button
					popovertarget={ detailsID }
					hx-get={ templer.RelativePath(ctx, "./"+img.UID) }
					hx-target={ "#" + detailsID }
					hx-swap="innerHTML"
				>
					<img
						src={ "/images/" + img.UID + "?w=800" }
						loading="lazy"
						class="w-full h-full object-cover"
						alt="Gallery item"
					/>
				</button>
			</div>
		}
	</div>
}