<script setup lang="ts">
    import { useRouter } from 'vue-router';
    import { useAuthStore } from 'src/stores/auth-store';
    import { useUiStore } from 'src/stores/ui-store';
    import { ref } from 'vue';
    import { RouteNames } from 'src/router/router-constants';

    const authStore = useAuthStore();
    const uiStore = useUiStore();
    const router = useRouter();
    const miniState = ref(true);

    const goToPageName = (pageName: string) => {
        router.push({ name: pageName }).catch(err => {
            console.error('Error with Vue Router: ', err);
        });
    };

    const handleLogout = () => {
        authStore.logout();

        router.push({ name: 'login' }).catch(err => {
            console.log('could not log you out: ', err);
        })
    }
</script>

<template>
    <q-drawer 
    v-model="uiStore.isRightDrawerOpen"
    overlay 
    elevated 
    side="left" 
    :mini="miniState" 
    @mouseenter="miniState = false"
    @mouseleave="miniState = true"
    class="bg-dark"
    >
        <q-scroll-area class="fit">
            <q-list>
                <!-- Home  -->
                <q-item v-ripple clickable side @click="goToPageName(RouteNames.DASHBOARD)">
                    <q-item-section avatar>
                        <q-icon name="home" color="primary" />
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.home') }}</q-item-label>
                    </q-item-section>
                </q-item>

                <!-- Timesheet Validation -- Supervisor and Accounting only -->
                <q-item v-ripple clickable side @click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
                    v-if="['supervisor', 'accounting'].includes(authStore.user.role)">
                    <q-item-section avatar>
                        <q-icon name="event_available" color="primary" />
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet_approvals') }}</q-item-label>
                    </q-item-section>
                </q-item>

                <!-- Employee List -- Supervisor, Accounting and HR only -->
                <q-item v-ripple clickable side @click="goToPageName(RouteNames.EMPLOYEE_LIST)"
                    v-if="['supervisor', 'accounting', 'human_resources'].includes(authStore.user.role)">
                    <q-item-section avatar>
                        <q-icon name="view_list" color="primary" />
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.employee_list') }}</q-item-label>
                    </q-item-section>
                </q-item>

                <!-- Employee Timesheet temp -- Employee, Supervisor, Accounting only -->
                <q-item v-ripple clickable side @click="goToPageName(RouteNames.TIMESHEET_TEMP)"
                    v-if="['supervisor', 'accounting', 'employee'].includes(authStore.user.role)">
                    <q-item-section avatar>
                        <q-icon name="punch_clock" color="primary" />
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet') }}</q-item-label>
                    </q-item-section>
                </q-item>

                <!-- Profile -->
                <q-item v-ripple clickable side @click="goToPageName(RouteNames.PROFILE)">
                    <q-item-section avatar>
                        <q-icon name="account_box" color="primary" />
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.profile') }}</q-item-label>
                    </q-item-section>
                </q-item>

                <!-- Help -->
                <q-item v-ripple clickable @click="goToPageName('help')">
                    <q-item-section avatar>
                        <q-icon name="contact_support" color="primary" />
                    </q-item-section>
                    <q-item-section>
                        <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.help') }}</q-item-label>
                    </q-item-section>
                </q-item>
            </q-list>

            <!-- Logout -->
            <q-item v-ripple clickable @click="handleLogout" class="absolute-bottom">
                <q-item-section avatar>
                    <q-icon name="exit_to_app" color="primary" />
                </q-item-section>
                <q-item-section>
                    <q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.logout') }}</q-item-label>
                </q-item-section>
            </q-item>
        </q-scroll-area>
    </q-drawer>
</template>