<script lang="ts">
	import { Designer } from "@pdfme/ui";
	import { onMount } from "svelte";

	import { Template, BLANK_PDF } from "@pdfme/common";

	let template: Template = {
		basePdf: BLANK_PDF,
		schemas: [
			{
			},
		],
	};

	let container: HTMLDivElement;

	let designer: Designer;

	onMount(() => {
		designer = new Designer({ domContainer: container, template });
	});

	function loadBasePDF() {
		if (!loadTemplateInput.files) return;

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

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

			const basePdf = e.target.result as string;
			const newTemplate = { ...template, basePdf };
			designer = new Designer({ domContainer: container, template: newTemplate });
		};

		reader.readAsDataURL(file);
	}

	function addNewField() {
		template = designer.getTemplate();

		template.schemas[0]["new-field"] = {
				type: "text",
				position: { x: 0, y: 0 },
				width: 10,
				height: 10
		};

		designer.updateTemplate(template);
	}

	function exportTemplate() {
		const template = designer.getTemplate();
		const blob = new Blob([JSON.stringify(template)], { type: "application/json" });
		const url = URL.createObjectURL(blob);
		const a = document.createElement("a");
		a.href = url;
		a.download = "template.json";
		a.click();
	}

	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 = function (e) {
				if (!e.target) return;

				const template = JSON.parse(e.target.result as string) as Template;
				designer = new Designer({ domContainer: container, template });
			};

			reader.readAsText(file);
		};

		input.click()
	}

	let loadTemplateInput: HTMLInputElement;
</script>

<header>
	<button class="btn btn-secondary" on:click={() => loadTemplateInput.click()}>Change base PDF</button>
	<button class="btn btn-secondary" on:click={addNewField}>Add new Field</button>
	<button class="btn btn-secondary" on:click={exportTemplate}>Export</button>
	<button class="btn btn-secondary" on:click={loadTemplate}>Load Template</button>
	<a class="btn btn-secondary" href="/dashboard/admin/pdf-viewer">Test in Viewer</a>
	<input type="file" hidden bind:this={loadTemplateInput} on:change={loadBasePDF}>
</header>

<div bind:this={container}></div>
