<template>
	<main>
		<h1>Account Settings</h1>
		<p v-if="sessionStore.account?.type !== 'anonymous'">
			Name: {{ sessionStore.account?.name }}
		</p>
		<p>Access: {{ sessionStore.account?.type }}</p>
		<form @submit.prevent="changeSettings">
			<label>
				Timezone
				<input type="text" v-model="timezone">
			</label>
			<button type="submit">
				Save
			</button>
		</form>
		<p>
			<ClientOnly>
				<PushNotification />
			</ClientOnly>
		</p>
		<fieldset>
			<legend>Danger Zone</legend>
			Delete my account and all data associated with it
			<button @click="deleteAccount">
				Delete
			</button>
		</fieldset>
	</main>
</template>

<script lang="ts" setup>
definePageMeta({
	middleware: ["authenticated"],
});

const sessionStore = useSessionStore();

const timezone = ref(sessionStore.account?.timezone ?? "");

async function changeSettings() {
	try {
		await $fetch("/api/account", {
			method: "patch",
			body: {
				timezone: timezone.value,
			}
		});
		await sessionStore.fetch();
	} catch (err: any) {
		alert(err.data.message);
	}
}

async function deleteAccount() {
	try {
		await $fetch.raw("/api/account", {
			method: "DELETE",
		});
		await sessionStore.fetch();
		await navigateTo("/");

	} catch (err: any) {
		alert(`Delete account failed: ${err.statusCode} ${err.statusMessage}`);
	}
}
</script>
