<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { inject, ref, watchEffect, type Ref } from 'vue'
import { useRoute } from 'vue-router'
const rail = inject<Ref<boolean>>('rail')

const icon = ref<string>('')
const title = ref<string>('')
const route = useRoute()
const currentTime = ref<string>('')
function ShowTime() {
  const timeNow = new Date()
  currentTime.value = timeNow.toLocaleTimeString()
}
setInterval(ShowTime, 1000)

watchEffect(() => {
  if (route.name === 'pq') {
    icon.value = 'mdi-text-box'
    title.value = ' คิวการผลิต'
  } else if (route.name === 'stocks') {
    icon.value = 'mdi-package-variant'
    title.value = 'Stock Management'
  } else if (route.name === 'dashboard') {
    icon.value = 'mdi-bulletin-board'
    title.value = 'แดชบอร์ด'
  } else if (route.name === 'management') { //คำสั่งซื้อ
    icon.value = 'mdi-cart-outline'
    title.value = 'จัดการคำสั่งซื้อ'
  } else if (route.name === 'transport-queue') {
    icon.value = 'mdi-car'
    title.value = 'คิวการขนส่ง'
  } else if (route.name === 'manage-materials') {
    icon.value = 'mdi-cube-outline'
    title.value = 'จัดการวัตถุดิบ'
  } else if (route.name === 'manage-products') {
    icon.value = 'mdi-archive'
    title.value = 'จัดการสินค้า'
  } else if (route.name === 'manage-customers') {
    icon.value = 'mdi-account-multiple'
    title.value = 'จัดการลูกค้า'
  } else if (route.name === 'manage-employees') {
    icon.value = 'mdi-account-search'
    title.value = 'จัดการพนักงาน'
  } else if (route.name === 'manage-machines') {
    icon.value = 'mdi-factory'
    title.value = 'จัดการเครื่องจักร'
  } else if (route.name === 'manage-transportation-cars') {
    icon.value = 'mdi-truck-delivery'
    title.value = 'จัดการรถขนส่ง'
  } else if (route.name === 'buystock') {
    icon.value = 'mdi-cart-plus'
    title.value = 'Buy Stock'
  } else if (route.name === 'usestock') {
    icon.value = 'mdi-cart-minus'
    title.value = 'Use Stock'
  } else if (route.name === 'receiptBuystock') {
    icon.value = 'mdi-receipt'
    title.value = 'Receipt BuyStock'
  } else if (route.name === 'receiptUsestock') {
    icon.value = 'mdi-receipt'
    title.value = 'Receipt UseStock'
  } else if (route.name === 'receiptCheckstock') {
    icon.value = 'mdi-receipt'
    title.value = 'Receipt CheckStock'
  } else if (route.name === 'member') {
    icon.value = 'mdi-account-group'
    title.value = 'Member Manager'
  } else if (route.name === 'salary') {
    icon.value = 'mdi-account-cash'
    title.value = 'Salary Management'
  } else if (route.name === 'attendance') {
    icon.value = 'mdi-clock'
    title.value = 'Time Attendance'
  } else if (route.name === 'attendanceTable') {
    icon.value = 'mdi-account-clock'
    title.value = 'Employee Attendance'
  } else if (route.name === 'history') {
    icon.value = 'mdi-clipboard-text-clock'
    title.value = 'History Attendance'
  } else if (route.name === 'customer') {
    icon.value = 'mdi-account-group'
    title.value = 'Customer Management'
  } else if (route.name === 'employee') {
    icon.value = 'mdi-account'
    title.value = 'Employee Management'
  } else if (route.name === 'user') {
    icon.value = 'mdi-account-tie'
    title.value = 'จัดการผู้ใช้งาน'
  } else if (route.name === 'login') {
    icon.value = 'mdi-login'
    title.value = 'Login'
  } else if (route.name === 'promotion') {
    icon.value = 'mdi-ticket-percent-outline'
    title.value = 'Promotion'
  } else if (route.name === 'receipt') {
    icon.value = 'mdi-receipt'
    title.value = 'Receipt Management'
  }  else if (route.name === 'se') {
    icon.value = 'mdi-cash-plus'
    title.value = 'Store Expenses Bill'
  }  else if (route.name === 'sereport') {
    icon.value = 'mdi-file-chart'
    title.value = 'Store Expenses Report'
  } else if (route.name === 'sechart') {
    icon.value = 'mdi-file-chart'
    title.value = 'Store Expenses Chart'
  }  else if (route.name === 'branch') {
    icon.value = 'mdi-store'
    title.value = 'Branch Management'
  } else if (route.name === 'product') {
    icon.value = 'mdi-food-fork-drink'
    title.value = 'Product Management'
  }else {
    icon.value = ''
    title.value = ''
  }
})
</script>

<template>
  <v-app-bar color="#2B2E3F">
    <v-app-bar-title>
      <v-icon style="color: white; font-weight: bold; font-size: 45px">{{
        icon
      }}</v-icon>
      <span style="color: white; font-weight: bold; font-size: 30px">{{ title }}</span>
    </v-app-bar-title>

    <v-spacer></v-spacer>
  </v-app-bar>
</template>