<script lang="ts">
	import UploadImages from "./UploadImages.svelte";
	import type { Enums } from "#lib/client/prisma.js";
	import { BedarfsausweisWohnenClient, BildClient, ObjektClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
	import { RotateCounterClockwise, Trash, Upload } from "radix-svelte-icons";
	import { api } from "astro-typesafe-api/client";
	import Cookies from "js-cookie";
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";

	export let images: BildClient[] = [];
	export let max: number = Infinity;
	export let min: number = 1;
	export let name: string = "";
	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
	export let objekt: ObjektClient;
	export let kategorie: Enums.BilderKategorie

	async function deleteImage(image: BildClient) {
		await api.bild.DELETE.fetch({
			uid: image.uid
		}, {
			headers: {
				"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})

		images = images.filter((x) => x.uid !== image.uid);
	}

	let upload: () => void;
</script>

<div class="flex flex-col gap-4">
	<UploadImages {name} {kategorie} {max} {min} bind:upload bind:objekt bind:images bind:ausweis><slot /></UploadImages>
	<div class="grid grid-cols-2 gap-2">
		{#each images as image, i}
			{#if image.kategorie == kategorie}
				<div class="relative group">
					<img
						src="/bilder/{image.uid}.jpg"
						alt={kategorie}
						class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
					/>
					<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
						<button
						type="button"
						class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
						on:click={() => {
							deleteImage(images[i])
						}}
					>
						<Trash size={20} color="#fff"></Trash>
					</button>
					<!-- <button
						type="button"
						class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
						on:click={async () => {
							let image = await rotateImage(images[i]);
							images[i] = image;
							images = images
						}}
					>
						<RotateCounterClockwise size={20} color="#fff"></RotateCounterClockwise>
					</button> -->
					</div>
				</div>
			{/if}
		{/each}

		<!-- Wir zeigen Platzhalter an, damit der Nutzer sieht wie viele Bilder er hochladen soll -->
		{#each { length: Math.max(0, Math.min(max, 4) - images.filter(image => image.kategorie === kategorie).length) } as _, i}
		<div class="relative group">
			<img
				src="/placeholder.png"
				alt={kategorie}
				class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
				class:opacity-35={i >= min}
			/>
			<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
				<button
					type="button"
					class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
					on:click={upload}
				>
					<Upload size={20} color="#fff"></Upload>
				</button>
			</div>
		</div>
		{/each}
	</div>
</div>