<template>
    <LayoutGuest>

        <Head title="Login" />

        <!-- <SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'"> -->
        <SectionFullScreen v-slot="{ cardClass }">
            <a class="text-2xl font-semibold flex justify-center items-center mb-8 lg:mb-10">
                <img src="/logo.svg" class="h-10 mr-4" alt="Windster Logo" />
                <!-- <span class="self-center text-2xl font-bold whitespace-nowrap">Tethys</span> -->
            </a>

            <CardBox v-if="isTwoFactorAuthNeeded == false" :class="cardClass" form @submit.prevent="submit">
                <FormValidationErrors v-bind:errors="errors" />

                <NotificationBarInCard v-if="status" color="info">
                    {{ status }}
                </NotificationBarInCard>

                <FormField label="Email" label-for="email" help="Please enter your email">
                    <FormControl v-model="form.email" :icon="mdiAccount" id="email" autocomplete="email" type="email"
                        required />
                </FormField>

                <FormField label="Password" label-for="password" help="Please enter your password">
                    <FormControl v-model="form.password" :icon="mdiAsterisk" type="password" id="password"
                        autocomplete="current-password" required />
                </FormField>

                <FormCheckRadioGroup v-model="form.remember" name="remember" :options="{ remember: 'Remember' }" />

                <!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
					{{ flash.message }}
					class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
				</NotificationBar> -->
                <div v-if="flash && flash.message" class="flex flex-col mt-6 animate-fade-in">
                    <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
                        <p class="font-bold">Be Warned</p>
                        <p>{{ flash.message }}</p>
                    </div>
                </div>

                <BaseDivider />

                <!-- buttons -->

                <BaseButtons>
                    <BaseButton type="submit" color="info" label=" Login to your account"
                        :class="{ 'opacity-25': form.processing }" v-bind:disabled="form.processing" />
                    <!-- <button type="submit" v-bind:disabled="form.processing" :class="{ 'opacity-25': form.processing }"
                        class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">
                        Login to your account
                    </button> -->
                    <!-- <BaseButton v-if="canResetPassword" :route-name="route('password.request')" color="info" outline
							label="Remind" /> -->
                </BaseButtons>
                <!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->

                <!-- <div class="text-sm font-medium text-gray-500">
                    Not registered? <a href="" class="text-teal-500 hover:underline">Create account</a>
                </div> -->
            </CardBox>


            <CardBox v-else-if="isTwoFactorAuthNeeded" :icon="mdiTwoFactorAuthentication" :class="cardClass" form
                @submit.prevent="submitFa2Form">

                <!-- authentication method menu -->
                <div class="lex flex-col md:flex-row mb-3">
                    <label for="authmethod-option-one" class="pure-radio">
                        <input id="authmethod-option-one" type="radio" v-model="authMethod" value="code" />
                        use 2fa app
                    </label>
                    <label for="authmethod-option-two" class="pure-radio">
                        <input id="authmethod-option-two" type="radio" v-model="authMethod" value="backupCode" />
                        use backup code
                    </label>
                    
                </div>

                <FormField v-if="authMethod === 'code'" label="2FA Code" label-for="code" help="Please enter 2factor code">
                    <FormControl v-model="fa2Form.code" :icon="mdiAccount" id="code" type="tel" required />
                </FormField>

                <FormField v-if="authMethod === 'backupCode'" label="Backup Code" label-for="backupCode" help="Please enter backup code">
                    <FormControl v-model="fa2Form.backup_code" :icon="mdiAccount" id="backupCode" type="tel" required />
                </FormField>


                <div v-if="flash && flash.message" class="flex flex-col mt-6 animate-fade-in">
                    <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
                        <p class="font-bold">Be Warned</p>
                        <p>{{ flash.message }}</p>
                    </div>
                </div>
                <BaseDivider />


                <BaseButtons>
                    <!-- <button type="submit" :icon="mdiContentSaveCheck" :disabled="fa2Form.processing"
                        :class="{ 'opacity-25': fa2Form.processing }"
                        class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">
                        Verify
                    </button> -->
                    <BaseButton type="submit" :icon="mdiContentSaveCheck" color="info" label=" Login to your account"
                        :class="{ 'opacity-25': fa2Form.processing }" v-bind:disabled="fa2Form.processing" />
                </BaseButtons>
                <!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->

            </CardBox>

        </SectionFullScreen>
    </LayoutGuest>
</template>

<script setup lang="ts">
import { useForm, Head, InertiaForm } from '@inertiajs/vue3';
import { Ref, ref } from 'vue';
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { mdiAccount, mdiAsterisk, mdiTwoFactorAuthentication, mdiContentSaveCheck } from '@mdi/js';
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
import SectionFullScreen from '@/Components/SectionFullScreen.vue';
import CardBox from '@/Components/CardBox.vue';
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
import BaseDivider from '@/Components/BaseDivider.vue';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';


import { stardust } from '@eidellev/adonis-stardust/client';
// import NotificationBar from '@/Components/NotificationBar.vue';
import { computed, watch } from 'vue';
import { usePage } from '@inertiajs/vue3';
// import axios from 'axios';
// import { LoginState } from '@/Dataset';

// interface IErrorMessage {
// 	[key: string]: Array<string>;
// }
const flash: Ref<any> = computed(() => {
    let test = usePage().props;
    return test.flash;
});

const user_id: Ref<any> = computed(() => {
    let test = usePage().props;
    return test.user_id;
});

const isTwoFactorAuthNeeded = ref(false);

const authMethod = ref('code');
watch(authMethod, (currentValue) => {
    if (currentValue == 'code') {
        fa2Form.backup_code = undefined;
    } else if (currentValue == 'backupCode') {
        fa2Form.code = undefined;
    }
});

// const user_id: ComputedRef<number> = computed(() => {
//     return usePage().props.flash.user_id as number;
// });


// const isTwoFactorAuthNeeded =  computed(() => {   
//         if (flash.new_user_id) {           
//             return true;
//         } else {
//             return false;
//         } 
// });



watch(user_id, () => {
    if (user_id.value) {
        isTwoFactorAuthNeeded.value = true;
    } else {
        isTwoFactorAuthNeeded.value = false;
    }
});

defineProps({
    canResetPassword: Boolean,
    status: {
        type: String,
        default: null,
    },
    errors: {
        type: Object,
        default: () => ({}),
    },
});

// const { version } = usePage();

const form: InertiaForm = useForm(() => ({
    email: '',
    password: '',
    remember: [],
}));

// const login = async (data): Promise<any | null> => {
//     try {
//         let resp = await axios.post(stardust.route('login.store'), data, {
//             headers: {
//                 'X-Inertia': true,
//                 'X-Inertia-Partial-Component': 'Users',
//                 'X-Inertia-Partial-Data': 'users',
//                 'X-Inertia-Version': version,
//             }
//         });

//         // Check if the response contains a redirect status
//         if (resp.data.component && resp.data.url) {
//             // Use Inertia.js to visit the specified component
//             router.visit(resp.data.url, resp.data.props);
//         } else {
//             // If it's not a redirect, reset the password field in the form
//             form.reset('password');
//             return resp.data;
//         }

//     } catch (error) {
//         // Handle errors if any
//         console.error('Error during login:', error);
//         throw error;
//     }
// };

// const submit = async () => {
//     // Transform the formData object
//     const formData = form.data();
//     const transformedData = {
//         ...formData,
//         remember: formData.remember && formData.remember.length ? 'on' : '',
//     };
//     const resp = await login(transformedData);
//     if (resp) {
//         if (resp.state == LoginState.STATE_VALIDATED) {
//             isTwoFactorAuthNeeded.value = true
//         }
//         fa2Form.login_id = resp.new_user_id;
//     }
// };

const submit = async () => {
    await form
        .transform((data: InertiaForm) => ({
            ...data,
            remember: form.remember && form.remember.length ? 'on' : '',
        }))
        .post('/app/login', {
            // .post(stardust.route('login.store'), {
            onFinish: () => {
                form.reset('password');
            },
        });
};


const fa2Form: InertiaForm = useForm(() => ({
    code: '',
    backup_code: '',
    // remember: [],
    login_id: ''
}));
const submitFa2Form = async () => {
    await fa2Form
        .transform((data: InertiaForm) => ({
            ...data,
            // remember: fa2Form.remember && fa2Form.remember.length ? 'on' : '',
            login_id: user_id.value
        }))
        .post(stardust.route('login.twoFactorChallenge'), {
            onFinish: () => {
                fa2Form.reset('code');
                fa2Form.reset('login_id');
                // form.reset('password');
            },
        });
};
</script>
