<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';
    import { CAN_APPROVE_PAY_PERIODS } from 'src/modules/shared/models/user.models';

    const auth_store = useAuthStore();
    const ui_store = useUiStore();
    const router = useRouter();
    const is_mini = ref(true);

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

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

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

<template>
    <q-drawer
        v-model="ui_store.is_left_drawer_open"
        :persistent="!ui_store.is_mobile_mode"
        mini-to-overlay
        elevated
        side="left"
        :mini="is_mini"
        @mouseenter="is_mini = false"
        @mouseleave="is_mini = true"
        class="bg-dark z-max"
    >
        <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="accent"
                            size="lg"
                        />
                    </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="CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST')"
                >
                    <q-item-section avatar>
                        <q-icon
                            name="event_available"
                            color="accent"
                            size="lg"
                        />
                    </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="CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST')"
                >
                    <q-item-section avatar>
                        <q-icon
                            name="view_list"
                            color="accent"
                            size="lg"
                        />
                    </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)"
                    v-if="CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST')"
                >
                    <q-item-section avatar>
                        <q-icon
                            name="punch_clock"
                            color="accent"
                            size="lg"
                        />
                    </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="accent"
                            size="lg"
                        />
                    </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="accent"
                            size="lg"
                        />
                    </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="accent"
                        size="lg"
                    />
                </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>