<script setup lang="ts">
    import { computed, onBeforeMount } from 'vue';
    import { storeToRefs } from 'pinia';
    import { onMounted, onUnmounted, watch } from 'vue';
    import {
        AuthForm,
        AuthCheckCodeForm,
        useAuthStore,
        useInitAuthState,
        useAuthConnector,
        EAuthStep,
    } from '@/modules/auth';
    import type { IAuthApiMethods, IAuthModuleProps } from '@/modules/auth/type/auth.type';
    import AuthorizationConfirmed from '@/modules/auth/components/AuthorizationConfirmed.vue';
    import UICard from '@/UI-kit/components/UI/card/UICard.vue';

    const props = withDefaults(defineProps<IAuthModuleProps>(), {
        authToken: '',
        apiMethods: () => ({}),
        initialEmail: '',
        emailVerifiedAt: null,
        cardPadding: '16px',
        cardBorderRadius: '16px',
        isCardBoxShadow: true,
        isCardBorder: true,
        translates: null,
    });

    const emit = defineEmits<{
        (e: 'update:email', email: string): void;
        (e: 'logout'): void;
        (e: 'email:confirmed'): void;
    }>();

    const authStore = useAuthStore();
    const { authStep, userEmail, translates } = storeToRefs(authStore);

    const authConnector = useAuthConnector(props.authToken);

    const finalApiMethods = computed<IAuthApiMethods>(() => {
        if (props.apiMethods && Object.keys(props.apiMethods).length > 0) {
            return props.apiMethods;
        }

        if (authConnector) {
            return {
                sendEmail: authConnector.authEmailCodeUser,
                verifyCode: authConnector.authEmailCodeVerificationUser,
                logoutUser: authConnector.logoutUser,
            };
        }

        return {};
    });

    watch(userEmail, (newEmail) => {
        emit('update:email', newEmail);
    });

    watch(
        () => props.translates,
        () => {
            if (props.translates) {
                translates.value = props.translates;
            } else {
                translates.value = authStore.defaultTranslates();
            }
        },
        {
            immediate: true,
        },
    );

    onMounted(() => {
        useInitAuthState(props.initialEmail, props.emailVerifiedAt, userEmail, authStep);
    });

    onUnmounted(() => {
        authStore.rmInterval();
    });
</script>

<template>
    <UICard
        class="auth-module w-100"
        :padding="cardPadding"
        :border-radius="cardBorderRadius"
        :is-box-shadow="isCardBoxShadow"
        :is-border="isCardBorder"
    >
        <AuthForm v-if="authStep === EAuthStep.input" :api-methods="finalApiMethods" />
        <AuthCheckCodeForm
            v-else-if="authStep === EAuthStep.confirm"
            :api-methods="finalApiMethods"
            @email:confirmed="emit('email:confirmed')"
        />
        <AuthorizationConfirmed
            v-else-if="authStep === EAuthStep.confirmed"
            :api-methods="finalApiMethods"
            @logout="emit('logout')"
        />
    </UICard>
</template>
