<script lang="ts">
	import AusweisPruefenBox from "#components/AusweisPruefenBox.svelte";
	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
	import AusweisPruefenNotification from "#components/AusweisPruefenNotification.svelte";
	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte"
	import { Event } from "#lib/client/prisma";
	import Pagination from "#components/Pagination.svelte";
	import { api } from "astro-typesafe-api/client";
	import Cookies from "js-cookie"
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js"
	import AusweisePruefenFilter from "#components/Dashboard/AusweisePruefenFilter.svelte";
	import { z, ZodTypeAny } from "zod";
	import { filterAusweise } from "#lib/filters.js";

	export let page: number;
	export let totalPages: number;

	let filters: { name: keyof z.infer<typeof filterAusweise>, type: ZodTypeAny, value: any }[] = []
</script>

<div class="flex flex-col mb-4">
	<AusweisePruefenFilter bind:filters={filters}></AusweisePruefenFilter>
</div>

<div class="gap-4 flex flex-col">
	{#await api.ausweise.GET.fetch({
		limit: 10,
		skip: (page - 1) * 10,
		filters: filters.reduce((acc, filter) => {
			acc[filter.name] = filter.value
			return acc
		}, {})
	}, {
		headers: {
			Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}` 
		}
	})}
		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
	{:then ausweise} 
	{#each ausweise as { ausweis, objekt, aufnahme, bilder, events }}
	{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt)}
		<div class="rounded-lg border w-full h-20 p-2.5 gap-4 flex flex-row items-center">
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-8 h-8 rounded-full"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="w-1/12 h-full flex flex-col gap-2">
				<div class="skeleton w-full h-4"></div>
				<div class="skeleton w-full h-4"></div>
			</div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
			<div class="skeleton w-4 h-4"></div>
		</div>
	{:then calculations}
		<AusweisPruefenBox {ausweis} {aufnahme} {objekt} {bilder} {events} {calculations}></AusweisPruefenBox>
	{/await}
{/each}
	{/await}
	
</div>

<Pagination  pages={totalPages} current={page} prev="/dashboard/admin/ausweise-pruefen/{page - 1}" next="/dashboard/admin/ausweise-pruefen/{page + 1}"></Pagination>

<div class="fixed bottom-8 right-8 flex flex-col gap-4">
	<NotificationProvider component={AusweisPruefenNotification}></NotificationProvider>
</div>