<script lang="ts">
	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
	import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
	import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
	import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
	import { onMount } from "svelte";
	export let user: BenutzerClient;

	let ausweise: VerbrauchsausweisWohnenClient[] | null = null;

	let ausweisUeberpruefung: ReturnType<typeof verbrauchsausweisWohnenCalculateFormProgress>[] = [];
	let errorCount = 0;

	onMount(async () => {
		ausweise = await client.v1.verbrauchsausweisWohnen.getMany.query({
			limit: 10
		});

		console.log(ausweise);
		

		if (!ausweise) return;

		ausweisUeberpruefung = ausweise.map(ausweis => verbrauchsausweisWohnenCalculateFormProgress(ausweis));

		errorCount = ausweisUeberpruefung.reduce((acc, { errors }) => acc + errors.length, 0);
	})

	
</script>

{#if errorCount > 0}
<h1 class="text-4xl font-medium my-8">Wichtiges</h1>

<div class="flex flex-row gap-4 overflow-x-auto">
	{#each ausweisUeberpruefung as { errors }}
		{#if errors.length > 0}
			<div class="card w-96 card-bordered bg-base-200 border-base-300">
				<div class="card-body">
					<div class="badge font-semibold" class:badge-warning={errors[0].severity == "warning"} class:badge-error={errors[0].severity == "error"}>{errors[0].severity == "error" ? "Achtung!" : "Wichtig!"}</div>
					<h2 class="card-title">{errors[0].title}</h2>
					<p>{errors[0].description}</p>
					{#if errors[0].resolvehref}
					<div class="card-actions justify-end">
						<a class="btn btn-primary" href={errors[0].resolvehref}>Beheben</a>
					</div>
					{/if}
				</div>
			</div>
		{/if}
	{/each}
</div>
{/if}

<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
	
<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">

	{#if ausweise === null}
		<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
	{:else}
		{#if ausweise.length == 0}
			<div class="">
				<h1 class="text-2xl">Es konnten keine Ausweise gefunden werden.</h1>
				<p>Erstellen sie einen Verbrauchsausweis für ihr Wohngebäude <a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude">hier</a></p>
			</div>
		{:else}
			{#each ausweise as ausweis, i}
				<DashboardAusweis progress={ausweisUeberpruefung[i]?.progress || 0} {ausweis}></DashboardAusweis>
			{/each}
		{/if}
	{/if}

</div>

<div class="flex items-center justify-center mt-12">
	<div class="join">
		<button class="join-item btn btn-ghost shadow-none">1</button>
		<button class="join-item btn btn-ghost shadow-none">2</button>
		<button class="join-item btn btn-ghost shadow-none">3</button>
		<button class="join-item btn btn-ghost shadow-none">4</button>
	</div>
</div>