<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 { ModuleNames } 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.error('could not log you out: ', err);
        })
    }
</script>

<template>
    <q-drawer
        v-model="ui_store.is_left_drawer_open"
        :persistent="!$q.platform.is.mobile"
        mini-to-overlay
        elevated
        side="left"
        :mini="is_mini"
        @mouseenter="is_mini = false"
        @mouseleave="is_mini = true"
        class="bg-dark z-max column no-wrap"
        :class="!$q.platform.is.mobile && is_mini ? 'items-center' : 'items-start'"
    >
        <!-- Home  -->
        <q-btn
            flat
            dense
            no-wrap
            size="lg"
            icon="home"
            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.home')"
            class="col-auto text-uppercase text-weight-bold q-my-xs"
            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
            @click="goToPageName(RouteNames.DASHBOARD)"
        />

        <!-- Timesheet Validation -->
        <q-btn
            v-if="auth_store.user?.user_module_access.includes(ModuleNames.TIMESHEETS_APPROVAL)"
            flat
            dense
            no-wrap
            size="lg"
            icon="event_available"
            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.timesheet_approvals')"
            class="col-auto text-uppercase text-weight-bold q-my-xs"
            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
            @click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
        />

        <!-- Employee List -->
        <q-btn
            v-if="auth_store.user?.user_module_access.includes(ModuleNames.EMPLOYEE_LIST)"
            flat
            dense
            no-wrap
            size="lg"
            icon="groups"
            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.employee_list')"
            class="col-auto text-uppercase text-weight-bold q-my-xs"
            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
            @click="goToPageName(RouteNames.EMPLOYEE_LIST)"
        />

        <!-- Employee Timesheet -->
        <q-btn
            v-if="auth_store.user?.user_module_access.includes(ModuleNames.TIMESHEETS)"
            flat
            dense
            no-wrap
            size="lg"
            icon="punch_clock"
            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.timesheet')"
            class="col-auto text-uppercase text-weight-bold q-my-xs"
            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
            @click="goToPageName(RouteNames.TIMESHEET)"
        />

        <!-- Profile -->
        <q-btn
            v-if="auth_store.user?.user_module_access.includes(ModuleNames.PERSONAL_PROFILE)"
            flat
            dense
            no-wrap
            size="lg"
            icon="account_box"
            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.profile')"
            class="col-auto text-uppercase text-weight-bold q-my-xs"
            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
            @click="goToPageName(RouteNames.PROFILE)"
        />

        <!-- Help -->
        <q-btn
            flat
            dense
            no-wrap
            size="lg"
            icon="contact_support"
            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.help')"
            class="col-auto text-uppercase text-weight-bold q-my-xs"
            :class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
            @click="goToPageName(RouteNames.HELP)"
        />

        <!-- Logout -->
        <q-btn
            flat
            dense
            no-wrap
            size="lg"
            icon="exit_to_app"
            :label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.logout')"
            class="col-auto text-uppercase text-weight-bold q-my-xs"
            :class="!$q.platform.is.mobile && is_mini ? 'absolute-bottom': 'absolute-bottom-left'"
            @click="handleLogout"
        />
    </q-drawer>
</template>