<script
    setup
    lang="ts"
>
    import { onMounted, ref } from 'vue';
    import { useQuasar } from 'quasar';
    import { useRouter } from 'vue-router';
    import { useAuthStore } from 'src/stores/auth-store';
    import { useUiStore } from 'src/stores/ui-store';
    import { RouteNames } from 'src/router/router-constants';
    import { ModuleNames, type UserModuleAccess } from 'src/modules/shared/models/user.models';
import { useAuthApi } from 'src/modules/auth/composables/use-auth-api';

    const DRAWER_BUTTONS: { i18n_key: string, icon: string, route: RouteNames, required_module?: UserModuleAccess }[] = [
        { i18n_key: 'nav_bar.home', icon: "home", route: RouteNames.DASHBOARD, required_module: ModuleNames.DASHBOARD },
        { i18n_key: 'nav_bar.timesheet_approvals', icon: "event_available", route: RouteNames.TIMESHEET_APPROVALS, required_module: ModuleNames.TIMESHEETS_APPROVAL },
        { i18n_key: 'nav_bar.employee_list', icon: "groups", route: RouteNames.EMPLOYEE_LIST, required_module: ModuleNames.EMPLOYEE_LIST },
        { i18n_key: 'nav_bar.timesheet', icon: "punch_clock", route: RouteNames.TIMESHEET, required_module: ModuleNames.TIMESHEETS },
        { i18n_key: 'nav_bar.profile', icon: "account_box", route: RouteNames.PROFILE, required_module: ModuleNames.PERSONAL_PROFILE },
        { i18n_key: 'nav_bar.help', icon: "contact_support", route: RouteNames.HELP },
    ]

    const q = useQuasar();
    const auth_store = useAuthStore();
    const authApi = useAuthApi();
    const ui_store = useUiStore();
    const router = useRouter();
    const is_mini = ref(true);

    const onClickDrawerPage = (page_name: RouteNames) => {
        is_mini.value = true;

        router.push({ name: page_name }).catch(error => {
            console.error('failed to reach page: ', error);
        });
    };

    const handleLogout = () => {
        authApi.logout();
    };

    onMounted(() => {
        if (q.platform.is.mobile) {
            ui_store.is_left_drawer_open = false;
        }
    })
</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"
    >
        <q-scroll-area class="column fit">
            <div
                v-for="button, index in DRAWER_BUTTONS"
                :key="index"
                v-show="button.required_module ?? true"
                @click="onClickDrawerPage(button.route)"
            >
                <div
                    v-if="button.required_module ? auth_store.user?.user_module_access.includes(button.required_module) : true"
                    class="row items-center full-width q-py-sm cursor-pointer"
                    :class="$router.currentRoute.value.name === button.route ? ($q.dark.isActive ? 'bg-green-10' : 'bg-green-2') : ''"
                >
                    <q-icon
                        :name="button.icon"
                        color="accent"
                        size="lg"
                        class="col-auto q-pl-sm"
                    />

                    <div
                        class="col text-uppercase text-weight-bold text-h6 q-pl-sm"
                        :class="$q.platform.is.mobile ? '' : 'q-mini-drawer-hide'"
                    >
                        {{ $t(button.i18n_key) }}
                    </div>
                </div>
            </div>

            <q-separator spaced />

            <div
                class="row items-center full-width cursor-pointer q-py-sm"
                @click="handleLogout"
            >
                <q-icon
                    name="exit_to_app"
                    color="accent"
                    size="lg"
                    class="col-auto q-pl-sm"
                />

                <div
                    class="col text-uppercase text-weight-bold text-h6 q-pl-sm"
                    :class="$q.platform.is.mobile ? '' : 'q-mini-drawer-hide'"
                >
                    {{ $t('nav_bar.logout') }}
                </div>
            </div>
        </q-scroll-area>
    </q-drawer>
</template>