<template>
  <div>
    <DefaultHeaderPage title="Grupos de Permissões" :show-filter-icon="false" />
    <div class="q-px-sm">
      <DefaultTable
        ref="tableRef"
        title="Lista de Grupos de Permissões"
        :columns="columns"
        :api-call="getEditableUserTypes"
        description="grupos"
        :female="false"
        :add-item="canAdd"
        add-item-label="Novo Grupo"
        @on-add-item="onAdd"
      >
        <template #body-cell-actions="{ row }">
          <q-td>
            <div class="row no-wrap justify-center" style="gap: 8px">
              <q-btn v-if="canEdit" outline icon="mdi-shield-key-outline" style="width: 36px" color="secondary" @click.stop="onEditPermissions(row)">
                <q-tooltip>Permissões</q-tooltip>
              </q-btn>
              <q-btn v-if="canEdit && !row.is_system" outline icon="mdi-pencil-outline" style="width: 36px" color="secondary" @click.stop="onEdit(row)">
                <q-tooltip>Editar grupo</q-tooltip>
              </q-btn>
              <q-btn v-if="canDelete && !row.is_system" outline icon="mdi-trash-can-outline" style="width: 36px" color="negative" @click.stop="onDelete(row)">
                <q-tooltip>Remover grupo</q-tooltip>
              </q-btn>
            </div>
          </q-td>
        </template>
      </DefaultTable>
    </div>
  </div>
</template>

<script setup>
import { computed, defineAsyncComponent, useTemplateRef } from "vue";
import { useQuasar } from "quasar";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import { getUserTypes, deleteUserType } from "src/api/user_type";
import { permissionStore } from "src/stores/permission";

const AddEditPermissionGroupDialog = defineAsyncComponent(() => import("src/pages/permissions/components/AddEditPermissionGroupDialog.vue"));
const PermissionGroupDialog = defineAsyncComponent(() => import("src/pages/permissions/components/PermissionGroupDialog.vue"));
const $q = useQuasar();
const tableRef = useTemplateRef("tableRef");
const access = permissionStore();
const canAdd = computed(() => access.getAccess("franchisee_permissions", "add"));
const canEdit = computed(() => access.getAccess("franchisee_permissions", "edit"));
const canDelete = computed(() => access.getAccess("franchisee_permissions", "delete"));
const getEditableUserTypes = async () => (await getUserTypes()).filter((group) => !group.is_system);
const columns = [
  { name: "label", label: "Nome", field: "label", align: "left", sortable: true },
  { name: "slug", label: "Código", field: "slug", align: "left", sortable: true },
  { name: "actions", label: "Ações", field: null, align: "center", required: true },
];
const refresh = () => tableRef.value?.refresh();
const onAdd = () => $q.dialog({ component: AddEditPermissionGroupDialog }).onOk(refresh);
const onEdit = (group) => $q.dialog({ component: AddEditPermissionGroupDialog, componentProps: { group } }).onOk(refresh);
const onEditPermissions = (group) => $q.dialog({ component: PermissionGroupDialog, componentProps: { group } });
const onDelete = (group) => $q.dialog({
  title: "Confirmar exclusão",
  message: `Remover o grupo "${group.label}"?`,
  cancel: { label: "Cancelar", outline: true, color: "secondary" },
  ok: { label: "Remover", color: "negative" },
  persistent: true,
}).onOk(async () => { await deleteUserType(group.id); refresh(); });
</script>
