<template>
    <div class="row" @keyup.enter="submitForm">
        <div class="col">
            <error-message-component class="m-b-20" :error="error"></error-message-component>

            <div class="row">
                <div class="col">
                    <validation-wrapper-component class="m-b-15" :validator="v$.parameters.email">
                        <label class="text-primary">Email Address</label>
                        <div class="controls">
                            <input name="email" type="text" class="form-control fs-12" v-model.trim="parameters.email">
                        </div>
                    </validation-wrapper-component>
                    <validation-wrapper-component :validator="v$.parameters.password">
                        <label class="text-primary">Password</label>
                        <div class="controls">
                            <input name="password" type="password" class="form-control fs-12" v-model="parameters.password">
                        </div>
                    </validation-wrapper-component>
                    <div class="row m-t-15 align-items-center justify-content-center">
                        <div class="col-auto">
                            <p class="muted fs-11 font-arial m-b-0 pointer" @click="uiStore.toggleSection('forgetPassword', true)">Forgot password?</p>
                        </div>
                        <div class="col text-right">
                            <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm" id="sign-in">Sign In</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';
import { useFormHandler } from '@/composables/useFormHandler';
import { useAuthStore } from '@/stores/auth';
import { useUiStore } from '@/stores/ui';

interface Props {
    section: string;
}

const props = defineProps<Props>();

const authStore = useAuthStore();
const uiStore = useUiStore();
const { submit, error, formHandler} = useFormHandler({ section: props.section });

const rules = {
    parameters: {
        email: { required, email },
        password: { required }
    }
};

const parameters = reactive({
    email: '',
    password: ''
});

const v$ = useVuelidate(rules, { parameters });

const submitForm = async () => {
    const isFormValid = await v$.value.$validate();
    if (!isFormValid) return;

    await submit(
        route('api.account.authentication.authenticate.attempt'),
        'post',
        props.section,
        false, // No success notification
        false, // No default error notification (we handle it via errorMessageHandler)
        parameters,
        {
            successHandler: (response: any) => {
                formHandler();
                authStore.userAuthentication({
                    access_token: response.payload.access_token,
                    redirect_url: response.payload.redirect_url
                });
            },
        }
    );
};
</script>
