<template>
  <v-card>
    <v-data-table
      :headers="headers"
      :items="permissionsList"
      item-value="name"
      class="elevation-1"
      dense
    >
      <template v-slot:[`item.read`]="{ item }">
        <v-switch
          v-model="item.permissions.read"
          color="success"
          false-color="error"
          @change="updatePermissionStatus(item.name, 'read', item.permissions.read)"
          hide-details
        />
      </template>

      <template v-slot:[`item.write`]="{ item }">
        <v-switch
          v-model="item.permissions.write"
          color="success"
          false-color="error"
          @change="updatePermissionStatus(item.name, 'write', item.permissions.write)"
          hide-details
        />
      </template>

      <template v-slot:[`item.edit`]="{ item }">
        <v-switch
          v-model="item.permissions.edit"
          color="success"
          false-color="error"
          @change="updatePermissionStatus(item.name, 'edit', item.permissions.edit)"
          hide-details
        />
      </template>

      <template v-slot:[`item.delete`]="{ item }">
        <v-switch
          v-model="item.permissions.delete"
          color="success"
          false-color="error"
          @change="updatePermissionStatus(item.name, 'delete', item.permissions.delete)"
          hide-details
        />
      </template>
    </v-data-table>
  </v-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Dados recebidos do componente pai
const props = defineProps({
  permissionsData: {
    type: Object,
    required: true
  }
});

// Função para converter o formato de dados do componente pai para o formato interno da tabela
const convertPermissionsToObject = (permissionsList) => {
  return {
    read: permissionsList.includes('read'),
    write: permissionsList.includes('write'),
    edit: permissionsList.includes('edit'),
    delete: permissionsList.includes('delete')
  };
};

// Estado das permissões (no formato necessário para a tabela)
const permissionsList = ref([]);

// Verificar se props.permissionsData é um objeto e possui entradas
onMounted(() => {
  if (props.permissionsData && typeof props.permissionsData === 'object') {
    permissionsList.value = Object.entries(props.permissionsData).map(([name, permissions]) => ({
      name,
      permissions: convertPermissionsToObject(permissions)
    }));
  } else {
    console.error('permissionsData não é um objeto válido');
  }
});

// Cabeçalhos para a tabela, com permissões incluídas
const headers = [
  { title: 'Nome', align: 'start', key: 'name', sortable: false, width: '200px' },
  { title: 'Ler', align: 'start', key: 'read', sortable: false, width: '120px' },
  { title: 'Escrever', align: 'start', key: 'write', sortable: false, width: '120px' },
  { title: 'Editar', align: 'start', key: 'edit', sortable: false, width: '120px' },
  { title: 'Deletar', align: 'start', key: 'delete', sortable: false, width: '120px' }
];

// Função para atualizar o status das permissões
const updatePermissionStatus = (itemName, permission, value) => {
  const item = permissionsList.value.find(i => i.name === itemName);
  if (item) {
    item.permissions[permission] = value;
    // Exibir no console a permissão atualizada
    console.log(`Permissão '${permission}' para '${itemName}' alterada para: ${value ? 'Ativo' : 'Inativo'}`);
  }
};
</script>


<style scoped>
.v-data-table .v-data-table__wrapper {
  padding: 8px;
}

.v-data-table th, .v-data-table td {
  padding: 8px !important;
  font-size: 14px;
}

.v-switch {
  margin: 0 !important;
}

/* Removendo padding extra dos switches */
:deep(.v-switch__track) {
  opacity: 1 !important;
}
</style>
