<script setup lang="ts">
import type { RoleMaster } from '~/types/setting/roleMaster';
import { formatDateTime } from '~/utils/datetime';

defineProps<{
  role: RoleMaster;
}>();

const emit = defineEmits(['detail', 'edit-role', 'delete-role', 'assign-permission']);

const handleDetail = (role: RoleMaster) => emit('detail', role);
const handleEditRole = (role: RoleMaster) => emit('edit-role', role);
const handleDeleteRole = (role: RoleMaster) => emit('delete-role', role);
const handleAssignPermission = (role: RoleMaster) => emit('assign-permission', role);
</script>

<template>
  <div class="page-row-container">
     <v-card class="mb-3 page-card" elevation="2" @click="handleDetail(role)">
      <v-card-text class="pa-5">
        <div class="d-flex align-center">
          <v-tooltip location="bottom" :text="role.active ? 'Aktif' : 'Tidak Aktif'">
            <template #activator="{ props: activatorProps }">
              <v-avatar v-bind="activatorProps" :color="role.active ? 'primary' : 'muted'" size="40" class="me-3">
                <v-icon>mdi-shield-account</v-icon>
              </v-avatar>
            </template>
          </v-tooltip>
          <div class="flex-grow-1">
            <div class="d-flex align-center">
              <h6 class="text-subtitle-1 font-weight-semibold">{{ role.name }}</h6>
            </div>
            <p class="text-muted mb-0">{{ formatDateTime(role.created_at) }}</p>
          </div>

          <v-tooltip location="bottom" text="Assign permission">
            <template #activator="{ props: activatorProps }">
              <v-btn v-bind="activatorProps" icon variant="text" class="ml-2" @click.stop="handleAssignPermission(role)">
                <v-icon>mdi-account-cog</v-icon>
              </v-btn>
            </template>
          </v-tooltip>

          <v-tooltip location="bottom" text="Edit role">
            <template #activator="{ props: activatorProps }">
              <v-btn v-bind="activatorProps" icon variant="text" class="ml-2" @click.stop="handleEditRole(role)">
                <v-icon>mdi-pencil</v-icon>
              </v-btn>
            </template>
          </v-tooltip>

          <v-tooltip location="bottom" text="Hapus role">
            <template #activator="{ props: activatorProps }">
              <v-btn v-bind="activatorProps" icon variant="text" class="ml-2" @click.stop="handleDeleteRole(role)">
                <v-icon>mdi-delete</v-icon>
              </v-btn>
            </template>
          </v-tooltip>
        </div>
      </v-card-text>
    </v-card>
  </div>
</template>

<style scoped>
.page-row-container {
  position: relative;
}
.page-card {
  cursor: pointer;
}
</style>
