<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useAuthStore } from 'src/modules/stores/auth.store';
  // import { getInitials } from 'src/helpers/object';

  const route = useRoute();
  const router = useRouter();
  const authStore = useAuthStore();

  const userConnected = authStore.user;
  const userRole: string = userConnected.role;
  const leftDrawerOpen = ref(false);

  function toggleLeftDrawer() {
    leftDrawerOpen.value = !leftDrawerOpen.value;
  }

  const goToUsers = () => {
    router.replace('/users');
  };

  const goToShiftsValidations = () => {
    router.replace('/time_sheet_validations');
  };

  const goToHome = () => {
    router.replace('/');
  };

  // const goToHelp = () => {
  //   router.replace('/help');
  // };
</script>

<template>
  <q-footer bordered class="bg-white">
    <q-tabs
      no-caps
      active-color="primary"
      indicator-color="transparent"
      class="text-grey-8"
    >
      <q-tab name="home" icon="home" @click="goToHome" />
      <!-- <q-tab name="help" icon="help" @click="goToHelp" /> -->
      <q-tab name="menu" icon="menu" @click="toggleLeftDrawer" />
      <q-drawer v-model="leftDrawerOpen" side="right">
        <q-scroll-area
          style="
            height: calc(100% - 150px);
            margin-top: 150px;
            border-right: 1px solid #ddd;
          "
        >
          <q-list padding>
            <q-item
              clickable
              v-ripple
              :active="route.path === '/users'"
              active-class="bg-primary text-white"
              @click="goToUsers"
              v-if="userRole === 'admin'"
            >
              <q-item-section avatar>
                <q-icon name="list" />
              </q-item-section>

              <q-item-section> {{ $t('navBar.navItem_1') }} </q-item-section>
            </q-item>
            <q-item
              clickable
              v-ripple
              :active="route.path === '/time_sheet_validations'"
              active-class="bg-primary text-white"
              @click="goToShiftsValidations"
              v-if="userRole === 'admin'"
            >
              <q-item-section avatar>
                <q-icon name="supervisor_account" />
              </q-item-section>

              <q-item-section>{{ $t('navBar.navItem_2') }} </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>

        <q-img
          class="absolute-top"
          src="https://cdn.quasar.dev/img/material.png"
          style="height: 150px"
        >
          <div class="absolute-bottom bg-transparent">
            <!-- <q-avatar color="primary" size="68px" class="q-mb-sm">
              {{
                getInitials(
                  `${userConnected.first_name} ${userConnected.last_name}`,
                )
              }}</q-avatar -->
            >

            <div class="text-weight-bold">
              {{ userConnected.firstName }} {{ userConnected.lastName }}
            </div>
            <div>{{ userConnected.email }}</div>
          </div>
        </q-img>
      </q-drawer>
    </q-tabs>
  </q-footer>
</template>
