<script setup lang="ts">
    import { useAuthApi } from '../composables/use-auth-api';
    import { useRouter } from 'vue-router';

    const auth_api = useAuthApi();
    const router = useRouter();

    const setBypassUser = (bypassRole: string) => {
        auth_api.setUser(bypassRole);
        
        router.push({ name: 'dashboard' }).catch( err => {
            console.error('Router navigation failed: ', err);
        });
    };
</script>

<template>
    <q-card class="absolute-bottom-right q-ma-sm">
        <q-card-section class="q-pa-sm text-uppercase text-center"> impersonate </q-card-section>
        <q-card-actions vertical>
            <q-btn
                v-for="role, index in [ 'supervisor', 'accounting', 'human_resources', 'employee' ]" 
                :key="index"
                push 
                color="primary" 
                text-color="white"
                :label="role" 
                class="text-uppercase"
                @click="setBypassUser(role)"
            />
        </q-card-actions>
        </q-card>
</template>