<!-- <template>
	<div>
		<Link href="/app">Home</Link>
		<br />
		<h1>Login</h1>
		<Head>
			<title>About - My app</title>
			<meta
				head-key="description"
				name="description"
				content="This is a page specific description"
			/>
		</Head>

	</div>
</template>

<script>
import AuthLayout from '@/Layouts/Auth.vue';
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
export default {
	layout: AuthLayout,
};
</script>

<script setup>
// import { Head, Link } from '@inertiajs/vue3';
import { Head, Link } from '@inertiajs/inertia-vue3'
import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
</script> -->

<template>
    <LayoutGuest>
        <Head title="Login" />

        <SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'">
            <CardBox :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 -->
                <BaseLevel>
                    <BaseButtons>
                        <BaseButton
                            type="submit"
                            color="info"
                            label="Login"
                            :class="{ 'opacity-25': form.processing }"
                            v-bind:disabled="form.processing"
                        />
                        <!-- <BaseButton v-if="canResetPassword" :route-name="route('password.request')" color="info" outline
							label="Remind" /> -->
                    </BaseButtons>
                    <!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->
                </BaseLevel>
            </CardBox>
        </SectionFullScreen>
    </LayoutGuest>
</template>

<script setup lang="ts">
import { useForm, Head } from '@inertiajs/vue3';
import { Ref } from 'vue';
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { mdiAccount, mdiAsterisk } 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 BaseLevel from '@/Components/BaseLevel.vue';

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

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

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

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

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