<script lang="ts">
	import { variable } from "#lib/pdf/plugins/variables";
	import { Benutzer, GebaeudeStammdaten, Rechnungen, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
	import { Template } from "@pdfme/common";
	import { Viewer } from "@pdfme/ui";
	import { Check } from "radix-svelte-icons";
	import { image, text } from "@pdfme/schemas";
	import { AusweisData, convertAusweisData } from "#lib/AusweisData";

	

	export let ausweise: AusweisData[];

	let pdfInputs: AusweisData;
	let template: Template;
	let viewer: Viewer
	

	function loadTemplate() {
		const input = document.createElement("input");
		input.type = "file";
		input.accept = ".json";
		
		input.onchange = function (e) {
			if (!input.files) return;

			const file = input.files[0];
			const reader = new FileReader();

			reader.onload = async function (e) {
				if (!e.target) return;

				template = JSON.parse(e.target.result as string) as Template;

				if (!pdfInputs) {
					alert("Bitte wählen Sie einen Ausweis aus, um diesen als Basis zu verwenden.")
					return
				};

				viewer = new Viewer({
					domContainer: pdfViewerContainer,
					template,
					inputs: [convertAusweisData(pdfInputs)],
					plugins: { text, image, variable}
				})
			};

			reader.readAsText(file);
		};

		input.click();
	}

	function changeInputs(inputs: AusweisData) {
		pdfInputs = inputs;
		if (!template) {
			alert("Bitte laden Sie zuerst ein Template.")
			return
		}

		if (viewer) viewer.destroy();

		viewer = new Viewer({
			domContainer: pdfViewerContainer,
			template,
			inputs: [convertAusweisData(pdfInputs)],
			plugins: { text, image, variable}
		})
	}

	let pdfViewerContainer: HTMLDivElement;
</script>

<header>
	<div>
		<button class="btn btn-secondary mb-4" on:click={loadTemplate}>Load Template</button>
	</div>
</header>
<main class="grid grid-cols-[1fr_4fr] gap-4">
	<div>
		<div class="flex flex-col gap-4">
			{#each ausweise as ausweis}
				<div class="rounded-lg border p-2 flex flex-row items-center justify-between">
					<h2 class="text-black">{ausweis.gebaeude_stammdaten.adresse}</h2>
					<button class="btn btn-square btn-ghost p-1.5" on:click={() => {
						changeInputs(ausweis)
					}}><Check size={20}/></button>
				</div>
			{/each}
		</div>
	</div>
	<div bind:this={pdfViewerContainer}></div>
</main>