<script setup lang="ts">
    import { computed } from 'vue';
    import type {
        IAuthorizationConfirmed,
        IAuthLogoutResponse,
    } from '@/modules/auth/type/auth.type';
    import useRequestHandler from '@/UI-kit/composables/useRequestHandler';
    import { useAuthStore } from '@/modules/auth';
    import { storeToRefs } from 'pinia';

    const props = defineProps<IAuthorizationConfirmed>();

    const emit = defineEmits<{
        (e: 'logout'): void;
    }>();

    const authStore = useAuthStore();
    const { userEmail } = storeToRefs(authStore);

    const { requestHandler: logout, isLoading: isLoadingLogout } = useRequestHandler<
        void,
        IAuthLogoutResponse
    >({
        request: async () => {
            if (!props.apiMethods?.logoutUser) {
                throw new Error('API method logoutUser is not provided');
            }
            return await props.apiMethods.logoutUser();
        },
        then: async () => {
            authStore.destroyAuthState();
            emit('logout');
        },
    });

    const logoutIconStyle = computed(() => ({
        cursor: isLoadingLogout.value ? 'not-allowed' : 'pointer',
        opacity: isLoadingLogout.value ? 0.5 : 1,
    }));

    const handleLogout = async () => {
        await logout();
    };
</script>

<template>
    <div class="authorization-confirmed">
        <div class="authorization-confirmed__left-side">
            <span>E-Mail:</span>
            <strong>{{ userEmail }}</strong>
        </div>
        <img
            src="@/modules/auth/assets/auth/logout-icon.svg"
            alt="logout-icon"
            width="20"
            height="24"
            :style="logoutIconStyle"
            @click="!isLoadingLogout && handleLogout()"
        />
    </div>
</template>

<style scoped lang="scss">
    @use '@/UI-kit/assets/scss' as *;

    .authorization-confirmed {
        @include flex(row, 25px, center, space-between);

        width: 100%;

        &__left-side {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;

            & > span {
                @include text(13px, 400, 20px, var(--gray-400));
            }

            & > strong {
                @include text(20px, 600, 24px, var(--gray-400));
                color: var(--Black, var(--gray-900));
            }
        }
    }
</style>
