<script setup lang="ts">
import { ref, inject } from 'vue';
import { Auth, check_token, isErrorResponse, TokenInjectType } from '@/api';

enum state {
	SELECT,
	MAIL,
	TOTP
}

const currentState = ref<state>(state.SELECT);

const error = ref('');
const qrImage = ref('');
const secret = ref('');
const code = ref('');

const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;

async function selectMail() {
	const token = await check_token(jwt);
	if (!token) return;
	error.value = 'Working...';
	const res = await Auth.tfa_setup(true, token);
	if (isErrorResponse(res))
		error.value = 'Failed to select 2fa type: ' + res.message;
	else {
		error.value = '';
		currentState.value = state.MAIL;
	}
}

async function selectTotp() {
	const token = await check_token(jwt);
	if (!token) return;
	error.value = 'Working...';
	const res = await Auth.tfa_setup(false, token);
	if (isErrorResponse(res))
		error.value = 'Failed to select 2fa type: ' + res.message;
	else {
		qrImage.value = res.qrCode;
		secret.value = res.secret;
		error.value = '';
		currentState.value = state.TOTP;
	}
}

async function submit() {
	const token = await check_token(jwt);
	if (!token) return;
	error.value = 'Working...';
	const res = await Auth.tfa_complete(
		currentState.value === state.MAIL,
		code.value,
		token
	);
	if (isErrorResponse(res))
		error.value = 'Failed to submit code: ' + res.message;
	else jwt.logout();
}
</script>

<template>
	<div v-if="error !== ''" v-text="error"></div>
	<template v-if="currentState === state.SELECT">
		<div>Select 2 Factor authentication type:</div>
		<div>
			<button @click="selectMail">Mail</button>
			<button @click="selectTotp">Google Authenticator</button>
		</div>
	</template>
	<template v-else-if="currentState === state.MAIL">
		<div>Please enter the code you got by mail</div>
		<input type="text" placeholder="Code" v-model="code" />
		<button @click="submit()">Submit</button>
	</template>
	<template v-else>
		<img :src="qrImage" alt="QrCode" />
		<details>
			<summary>Show manual input code</summary>
			{{ secret }}
		</details>
		<div>Please enter the current code</div>
		<input type="text" placeholder="Code" v-model="code" />
		<button @click="submit()">Submit</button>
	</template>
</template>

<style scoped></style>
