<script lang="ts">
	import UploadImages from "./UploadImages.svelte";
	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";

	export let images: UploadedGebaeudeBild[] = [];
	export let max: number = 4;
	export let name: string = "";
	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
	export let gebaeude: GebaeudeClient;
	export let kategorie: Enums.BilderKategorie
</script>

<div class="flex flex-col gap-4">
	<UploadImages {name} {kategorie} {max} bind:gebaeude bind:images bind:ausweis />
	<div class="grid grid-cols-2 gap-2">
		{#each images as image, i}
			{#if image.kategorie == kategorie}
				<div class="relative group">
					<img
						src={image.base64}
						alt={kategorie}
						class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
					/>
					<button
						type="button"
						class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full w-[30px] h-[30px] p-2 bg-[rgba(0,0,0,0.4)]"
						on:click={() => {
							delete images[i];
							images = images.filter((x) => x);
						}}
					>
						R
					</button>
				</div>
			{/if}
		{/each}
	</div>
</div>
