import { computed, ref } from "vue";
import { defineStore } from "pinia";
import { AuthService } from "../modules/auth/services/services-auth";
import { CAN_APPROVE_PAY_PERIODS, type User } from "src/modules/shared/models/user.models";
import { useRouter } from "vue-router";
import { Notify } from "quasar";

export const useAuthStore = defineStore('auth', () => {
    const user = ref<User>();
    const authError = ref("");
    const isAuthorizedUser = computed(() => CAN_APPROVE_PAY_PERIODS.includes(user.value?.role ?? 'GUEST'));
    const router = useRouter();

    const login = () => {
        //TODO: manage customer login process
    };

    const oidcLogin = async (): Promise<void> => {
        window.addEventListener('message', async (event) => {
            if (event.data.type === 'authSuccess') {
                const new_user = await AuthService.getProfile();
                user.value = new_user;
                router.push('/');
            } else {
                Notify.create({
                    message: "You have popups blocked on this website!",
                    color: 'negative',
                    textColor: 'white',
                });
            }
        });

        const oidc_popup = window.open('http://localhost:3000/auth/v1/login', 'authPopup', 'width=600,height=800');

        if (!oidc_popup)
            Notify.create({
                message: "You have popups blocked on this website!",
                color: 'negative',
                textColor: 'white',
            });
    };

    const logout = () => {
        user.value = undefined;
    };

    return { user, authError, isAuthorizedUser, login, oidcLogin, logout };
});