<script lang="ts">
	import "../../style/formular.css";
	import {
		BenutzerClient,
		ObjektClient,
		ObjektKomplettClient,
	} from "#components/Ausweis/types.js";
	import DashboardObjekt from "#components/Dashboard/DashboardObjekt.svelte";
	import Overlay from "#components/Overlay.svelte";
	import PlzSuche from "#components/PlzSuche.svelte";
	import { api } from "astro-typesafe-api/client";
	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
	import { addNotification } from "#components/Notifications/shared.js";
	import Cookies from "js-cookie";
	import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";

	export let user: BenutzerClient;
	export let objekte: ObjektKomplettClient[];

	let objektOverlayHidden = true;

	let objekt: Omit<ObjektClient, "uid"> = {
		adresse: "",
		erstellungsdatum: new Date(),
		latitude: 0,
		longitude: 0,
		ort: "",
		plz: ""
	};

	async function objektErstellen() {
		if (!objekt.adresse || !objekt.ort || !objekt.plz) {
			addNotification({
				message: "Daten unvollständig.",
				subtext: "Ihre eingegebenen Daten sind unvollständig, bitte vervollständigen sie diese und versuchen sie es erneut..",
				timeout: 3000,
				dismissable: true,
				type: "error"
			})

			return;
		}

		const result = await api.objekt.PUT.fetch({
			adresse: objekt.adresse,
			erstellungsdatum: new Date(),
			latitude: 0,
			longitude: 0,
			ort: objekt.ort,
			plz: objekt.plz
		}, {
			headers: {
				Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
			}
		})

		if (!result) {
			addNotification({
				message: "Etwas ist schiefgelaufen.",
				subtext: "Das Objekt konnte nicht erstellt werden.",
				timeout: 3000,
				dismissable: true,
				type: "error"
			})

			return;
		}

		objektOverlayHidden = true;

		objekte.push({
			...objekt,
			aufnahmen: [],
			uid: result.uid
		})

		objekt = {
			adresse: "",
			erstellungsdatum: new Date(),
			latitude: 0,
			longitude: 0,
			ort: "",
			plz: ""
		}

		objekte = objekte
	}
</script>

<h1>Gebäudeübersicht</h1>

<hr />

<div class="relative mb-6">
	<button class="button" on:click={() => {
		objektOverlayHidden = false
	}}> Gebäude anlegen + </button>
</div>

<div class="columns columns-1 md:columns-2 lg:columns-3 gap-4">
	{#each objekte as objekt}
		<DashboardObjekt {objekt}></DashboardObjekt>
	{/each}
</div>

<Overlay bind:hidden={objektOverlayHidden}>
	<div class="bg-white w-full max-w-screen-sm px-4 py-6 flex flex-col gap-4">
		<h2 class="p-0 m-0">Gebäude erstellen</h2>

		<input type="text" placeholder="Adresse" bind:value={objekt.adresse}>
		<div class="flex flex-row gap-4 justify-between">
			<PlzSuche bind:city={objekt.ort} bind:zip={objekt.plz} name="" placeholder="PLZ"></PlzSuche>
			<input type="text" bind:value={objekt.ort} placeholder="Ort">
		</div>
		<button class="button mt-4" on:click={objektErstellen}>Gebäude Erstellen</button>
		</div>
</Overlay>

<NotificationWrapper></NotificationWrapper>