<script lang="ts">
	import SImage from './SImage.svelte';
	import InfiniteLoading from './InfiniteLoading.svelte';
	import BxBxsCrown from '../../ui/icons/bxs-crown.svelte';
	import debounce from 'p-debounce';
	interface Props {
		gridColumn?: number;
		onLoad?: (data: any) => void;
		onSelect?: (data: any) => void;
		imagesPages:
			| {
					src: string;
					alt: string;
					hoverSrc?: string | undefined | null;
					data?: {
						itemLevel: number | undefined | null;
						[key: string]: any;
					};
			  }[][]
			| undefined;
	}

	let { gridColumn = 2, imagesPages, onLoad, onSelect }: Props = $props();
	const debounce_loaded = debounce((data: any) => {
		onLoad?.(data);
	}, 1000);

	// tailwind purge can't use dynamic class name
	const gridClass = gridColumn == 2 ? 'grid-cols-2' : 'grid-cols-3';
	async function infiniteHandler({ loaded, complete }: any) {
		debounce_loaded({ loaded, complete });
	}

	function selectImage(image: any) {
		onSelect?.(image.data);
	}
</script>

{#if imagesPages}
	<div class="flex overflow-y-auto overflow-x-hidden flex-col w-full h-full">
		<div class={`grid gap-2 ${gridClass}`}>
			{#each imagesPages as pages}
				{#each pages as image}
					<button
						class={`relative rounded shadow hover:bg-gray-500 transition-all ${image.data?.kind}`}
						onclick={() => selectImage(image)}
					>
						{#if image.hoverSrc?.match(/\.(mp4|webm)$/)}
							<video src={image.hoverSrc} class="w-full h-full" autoplay loop>
								<track kind="captions" />
							</video>
						{:else}
							<SImage src={image.src} alt={image.alt ?? 'image media'} class={`w-full h-full `} />
						{/if}
						{#if image.data?.itemLevel}
							<div class="flex absolute right-0 bottom-0 p-1 hover:animate-bounce group">
								<BxBxsCrown class="w-6 h-6 text-yellow-500" />
								<div class="hidden mr-2 group-hover:block">Pro</div>
							</div>
						{/if}
					</button>
				{/each}
			{/each}
		</div>

		<InfiniteLoading onInfinite={infiniteHandler}>
			{#snippet noResults()}
				<div class="mt-10 flex-center">...</div>
			{/snippet}
			{#snippet noMore()}
				<div class="mt-10 flex-center">...</div>
			{/snippet}
		</InfiniteLoading>
	</div>
{/if}
