<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div ref="div">
		<button
			v-if="!loaded"
			@click="load"
		>
			Enable Log in with Telegram
		</button>
	</div>
</template>

<script lang="ts" setup>
import type { TelegramAuthData } from '~/shared/types/telegram';

const divElement = useTemplateRef("div");
const loaded = ref(false);
const runtimeConfig = useRuntimeConfig();
const sessionStore = useSessionStore();
const route = useRoute();

function load() {
	const script = document.createElement("script");
	script.async = true;
	script.src = "https://telegram.org/js/telegram-widget.js?22";
	script.dataset.telegramLogin = runtimeConfig.public.telegramBotUsername;
	script.dataset.size = "medium";
	script.dataset.onauth = "onTelegramAuth(user)";
	script.dataset.requestAccess = "write";
	divElement.value?.appendChild(script);
	loaded.value = true;
}

async function login(authData: TelegramAuthData) {
	const session = await $fetch("/api/auth/ap/telegram-login", {
		method: "POST",
		body: {
			authData,
		},
	});
	sessionStore.update(session);
	if (!session.account) {
		await navigateTo("/register");
	} else if (route.path === "/register") {
		await navigateTo("/");
	}
}

declare global {
	export function onTelegramAuth(user: any): void;
}
onMounted(() => {
	// XXX this asumes there's only ever one LogInTelegram component mounted
	window.onTelegramAuth = function(authData: TelegramAuthData) {
		login(authData).catch(err => alert(err.data?.message ?? err.message));
	};
});
</script>
