<script setup>
import { ref } from 'vue'

import { useAdminsStore } from '../stores/index.js'
import AdminLoginWithProvider from './AdminLoginWithProvider.vue'
import MFALoginForm from './MFALoginForm.vue'

const adminStore = useAdminsStore()

const email = ref('')
const password = ref('')
const processing = ref(false)
const twoFactorEnabled = ref()

const appIcon = import.meta.env.VITE_APP_LOGO_URL
async function submit () {
  const res = await adminStore.login(email.value, password.value)
  processing.value = false
  if (res.twoFactorEnabled) {
    twoFactorEnabled.value = true
    return true
  }
}

</script>

<template>
    <MFALoginForm systemAdmin v-if="twoFactorEnabled" />
    <v-layout v-else style="z-index: 10;" class="d-flex flex-column justify-center align-center h-100">
        <v-card elevation="0">
            <v-card-text align="center" class="loggedOutState">
                <v-avatar size="80">
                    <v-img :src="appIcon" cover></v-img>
                </v-avatar>
            </v-card-text>
        </v-card>
        <v-card class="ma-2 pa-2 rounded-xl elevation-2" width="80%" max-width="600px"
            @keydown.enter="processing = true; submit()">
            <v-card-text align="center">
                <p class="text-h6 mb-5">{{ $t('mua.adminLogin.header') }}</p>
                <v-text-field hide-details density="compact" data-test-id="login-emailField" class="mb-4 rounded"
                    color="primary" variant="solo" name="email" :label="$t('mua.adminLogin.emailLabel')" id="email"
                    type="email" :placeholder="email || 'your@email.com'" :value="email"
                    @update:modelValue="res => email = res.replace(/[^a-z0-9+@ \.,_-]/gim, '')" required />
                <v-text-field hide-details density="compact" data-test-id="login-passwordField" class="mb-4 rounded"
                    color="primary" variant="solo" name="password" :label="$t('mua.adminLogin.passwordLabel')"
                    id="password" type="password" :placeholder="password || '********'" :value="password"
                    @update:modelValue="res => password = res.replace(/[^a-z0-9!@#$%^&* \.,_-]/gim, '')"
                    required />
                <v-btn block color="primary" data-test-id="login-submitBtn" @click="processing = true; submit()">
                    {{ !processing ? $t('mua.adminLogin.submitBtn') : '' }}
                    <v-progress-circular v-if="processing" :size="20" indeterminate></v-progress-circular>{{
                        processing ? $t('mua.processing') : '' }}
                </v-btn>
            </v-card-text>
            <AdminLoginWithProvider />
        </v-card>
        <v-container class="w-100">
            <v-col class="text-center justify-center align-center">
                <p style="color: #888888;">{{ $t('mua.adminLogin.resetPasswordMsg') }}</p>
                <router-link data-test-id="login-resetPasswordBtn" style="text-decoration: none; color: #888888;"
                    class="font-weight-bold" to="/system-admins/forgot-password">{{
                        $t('mua.adminLogin.resetPasswordBtn') }}</router-link>
            </v-col>
        </v-container>
    </v-layout>
</template>
