<template>
  
  <UseTabs :user="user" :permissionsByRole="permissionsByRole" />
</template>

<script>
import { onMounted, reactive, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '../stores/users';  // Ajuste conforme o local do seu store.
import UseTabs from '../components/users/UseTabs.vue';  

export default {
components: {
UseTabs, // Registra o componente
},
setup() {
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const user = reactive({
id: null,
username: '',
email: '',
profile_image: '',
});

const permissions = ref([]); // Lista de permissões disponíveis

// Função para extrair permissões por role
const extractPermissionsByRole = (permissions) => {
const permissionsByRole = {};
permissions.forEach((role) => {
  const { service_role_name, permissions } = role;
  permissionsByRole[service_role_name] = permissions.map(permission => permission.type);
});
return permissionsByRole;
};

// Computed que usa a função extractPermissionsByRole
const permissionsByRole = computed(() => {
return extractPermissionsByRole(permissions.value);
});

const fetchUserData = async () => {
const id = route.params.id;

try {
  const response = await userStore.fetchUserById(id); // Busca usuário

  // Atualiza campos do usuário
  user.id = response.user.id;
  user.username = response.user.username;
  user.email = response.user.email;
  user.contacts = response.user.contacts;
  user.addresses = response.user.addresses;
  user.licenses = response.user.licenses;
  
  user.birth_date = response.user.birth_date || ''; // Preenche a data de nascimento, se disponível
  user.phone = response.user.phone || ''; //Preenche o telefone, se disponível
  user.profile_image = response.user.profile_image || '';  // Preenche o perfil de imagem, se disponível

  // Extrai permissões
  permissions.value = response.user.permissions || []; // Aqui, vamos considerar que a resposta traga permissões com papéis
} catch (error) {
  console.error('Erro ao buscar dados do usuário:', error);
}
};

const saveUser = async () => {
try {
  await userStore.updateUser(user.id, user); // Envia dados atualizados
  router.push('/dashboard/users'); // Redireciona após salvar
} catch (error) {
  console.error('Erro ao salvar usuário:', error);
}
};

onMounted(fetchUserData);

return {
user,
permissionsByRole,
saveUser,
};
},
};
</script>

<style scoped>
.v-container {
max-width: 800px;
margin: auto;
}
</style>
