<script setup lang="ts">
import { inject, type Ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'

const drawer = inject<Ref<boolean>>('drawer')
const rail = inject<Ref<boolean>>('rail')
const authStore = useAuthStore()
</script>

<template>
  <v-navigation-drawer expand-on-hover
  rail style="background-color: #2B2E3F; color:white;">
    <!-- profile -->
    <v-list>
      <v-list-item
    :prepend-avatar="`http://localhost:4000/images/users/${authStore.getCurrentUser()?.image || 'default.jpg'}`">
    <template #title>
      <span style="font-size: 20px; font-weight: bold">
        {{ authStore.getCurrentUser()?.name || 'Unknown User' }}
      </span>
    </template>
    <template #subtitle>
      <span style="font-size: 17px">
        {{ authStore.getCurrentUser()?.role?.name || 'No Role' }}
      </span>
    </template>
  </v-list-item>
    </v-list>
    <!-- nav -->
    <v-list density="compact" nav>
      <!---->
      <v-list-item prepend-icon="mdi-chart-areaspline" title="แดชบอร์ด" value="dashboard"
          :to="{ path: '/dashboard' }"></v-list-item>
        <!---->
          <!---->
      <v-list-item prepend-icon="mdi-cart-outline" title="จัดการคำสั่งซื้อ" value="management"
          :to="{ path: '/management' }"></v-list-item>
        <!---->
        <v-list-item prepend-icon="mdi-text-box" title="คิวการผลิต" value="pos" :to="{ name: 'pq' }"></v-list-item>
        <!---->
        <!---->
      <v-list-item prepend-icon="mdi-car" title="คิวการขนส่ง" value="transport-queue"
          :to="{ path: '/transport-queue' }"></v-list-item>
        <!---->
          <!---->
      <v-list-item prepend-icon="mdi-cube-outline" title="จัดการวัตถุดิบ" value="manage-materials"
          :to="{ path: '/manage-materials' }"></v-list-item>
        <!---->
          <!---->
      <v-list-item prepend-icon="mdi-archive" title="จัดการสินค้า" value="manage-products"
          :to="{ path: '/manage-products' }"></v-list-item>
        <!---->
          <!---->
      <v-list-item prepend-icon="mdi-account-multiple" title="จัดการลูกค้า" value="manage-customers"
          :to="{ path: '/manage-customers' }"></v-list-item>
        <!---->
          <!---->
      <v-list-item prepend-icon="mdi-clipboard-account" title="จัดการพนักงาน" value="manage-employees"
          :to="{ path: '/manage-employees' }"></v-list-item>
        <!---->
          <!---->
      <v-list-item prepend-icon="mdi-factory" title="จัดการเครื่องจักร" value="manage-machines"
          :to="{ path: '/manage-machines' }"></v-list-item>
        <!---->
          <!---->
      <v-list-item prepend-icon="mdi-truck-delivery" title="จัดการรถขนส่ง" value="manage-transportation-cars"
          :to="{ path: '/manage-transportation-cars' }"></v-list-item>
        <!---->
        <v-list-item prepend-icon="mdi-account-tie" title="จัดการผู้ใช้งาน" value="user"
          :to="{ path: '/user' }"></v-list-item>
        <!---->
    </v-list>
    <v-list density="compact" nav style="position: absolute; bottom: 0; width: 100%;">
      <v-divider></v-divider>
              <v-list-item prepend-icon="mdi-cog" title="ตั้งค่า" value="setting" ></v-list-item>
              <v-list-item prepend-icon="mdi-logout" title="ออกจากระบบ" value="logout" @click="authStore.logout()"></v-list-item>
    </v-list>
    
  </v-navigation-drawer>
</template>