<template>
  <v-navigation-drawer class="body" v-model="drawer" app temporary>
    <v-list>
      <v-list-item 
        v-for="(item, index) in menuItems" 
        :key="index" 
        :to="{ path: item.path }" 
        exact
      >
        <v-icon>{{ item.icon }}</v-icon>
        <v-list-item-content>{{ item.title }}</v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth' 

const drawer = ref(true)
const router = useRouter()
const authStore = useAuthStore()

// Testando se as permissões estão carregando corretamente
const dashboardPermissions = authStore.getPermissionsByRole('Admin')
console.log("Permissões do usuário:", dashboardPermissions)

// Itens do menu sem filtragem para testar se aparece
const menuItems = [
    //{ title: 'Home', path: '/dashboard/home', icon: 'mdi mdi-home-circle', requiredPermission: 'read' },
    { title: 'Dashboard', path: '/dashboard', icon: 'mdi mdi-view-dashboard', requiredPermission: 'read' },
    { title: 'Admin', path: '/dashboard/profile', icon: 'mdi-account', requiredPermission: 'read' },
    { title: 'Colaboradores', path: '/dashboard/colaboradores', icon: 'mdi-account-multiple-outline', requiredPermission: 'write' },
    { title: 'Câmera', path: '/dashboard/agentlist', icon: 'mdi mdi-cctv', requiredPermission: 'write' },
    //{ title: 'Train', path: '/dashboard/train', icon: 'mdi mdi-thought-bubble', requiredPermission: 'write' },
    { title: 'Escalas', path: '/dashboard/shifts', icon: 'mdi mdi-sitemap', requiredPermission: 'write' },
    { title: 'Feriados', path: '/dashboard/feriados', icon: 'mdi mdi-calendar-blank', requiredPermission: 'write' },
    { title: 'Empresas', path: '/dashboard/empresas', icon: 'mdi mdi-domain', requiredPermission: 'write' },
    { title: 'Configurações', path: '/dashboard/settings', icon: 'mdi-cog', requiredPermission: 'write' }
]

// Função para alternar o drawer
const toggleDrawer = () => {
    drawer.value = !drawer.value
}
</script>

<style scoped>
.body {
  background-color: #fafafab9;
}

.v-navigation-drawer {
  border-style: none;
}

.v-list-item {
  color: rgba(60, 135, 245, 1);
  transition: all 0.3s ease;
  border-style: solid;
  border-radius: 15px;
  margin: 8px 0;
  padding: 10px 16px;
  font-weight: 500;
}

.v-list-item:hover {
  background-color: #f5f5f5;
  color: rgba(76,201,240);
  border-radius: 15px !important;
  margin-left: 25px;
  border-radius: 50px;
  background: linear-gradient(145deg, #eeeded, #ffffff);
}

.v-list-item--active {
  background-color: #4cc9f0 !important;
  color: white !important;
  border-radius: 15px !important;
  margin-left: 25px;
  margin-right: 25px;
}

.v-list-item-content {
  margin-left: 16px;
  letter-spacing: 0.5px;
}
</style>

