<script lang="ts" setup>
	import { reactive } from "vue";
	import { notification } from "ant-design-vue";

	interface FormState {
		username: string;
		password: string;
	}
	definePageMeta({
		auth: {
			unauthenticatedOnly: true,
			navigateAuthenticatedTo: "/",
		},
		middleware: ["auth"],
	});
	useHead({
		title: "Log In",
	});
	const loadRef = ref<boolean>(false);

	const formState = reactive<FormState>({
		username: "",
		password: "",
	});
	const darkRef = inject<Ref<boolean>>("dark")!;
	const onFinish = async (values: any) => {
		const { signIn } = useAuth();

		try {
			loadRef.value = true;
			await signIn(values, { redirect: true, callbackUrl: "/" });
			const { data } = useAuth();
			darkRef!.value = data.value?.user?.profile.nightMode || false;
			if (darkRef!.value) document.body.dataset.theme = "dark";
			await navigateTo("/");
		} catch (e: any) {
			if (e.data) {
				loadRef.value = false;
				notification["error"]({
					message: h("div", { innerHTML: e.data.message }),
				});
			}
		}
	};
</script>
<template>
	<a-form :model="formState" name="basic" :label-col="{ span: 8 }" autocomplete="off" :colon="false" layout="vertical" @finish="onFinish">
		<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Username required!' }]">
			<a-input data-testid="login.username" v-model:value="formState.username" />
		</a-form-item>
		<a-form-item :colon="false" label="Password" name="password" :rules="[{ required: true, message: 'Password required!' }]">
			<a-input-password data-testid="login.password" v-model:value="formState.password" />
		</a-form-item>
		<a-form-item>
			<a-row :justify="'center'" :align="'middle'">
				<a-col>
					<a-button :loading="loadRef" data-testid="login.submit" type="primary" html-type="submit">Log in</a-button>
				</a-col>
			</a-row>
		</a-form-item>
	</a-form>
</template>
