<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="primary"
                @click.prevent.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="primary"
                @click.prevent.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.prevent.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 permissions = permissionStore();
const canAdd = computed(() => permissions.getAccess("franchisor_registrations", "add"));
const canEdit = computed(() => permissions.getAccess("franchisor_registrations", "edit"));
const canDelete = computed(() => permissions.getAccess("franchisor_registrations", "delete"));
const getEditableUserTypes = async (...args) => {
  const response = await getUserTypes(...args);
  const hiddenTypes = ["ADMIN", "ADMIN_FRANCHISEE"];
  if (Array.isArray(response)) {
    return response.filter(
      (row) =>
        row.access_scope === "franchisor" && !hiddenTypes.includes(row.slug),
    );
  }
  return response;
};

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 onAdd = () => {
  $q.dialog({ component: AddEditPermissionGroupDialog }).onOk(() => {
    tableRef.value?.refresh();
  });
};

const onEdit = (row) => {
  $q.dialog({
    component: AddEditPermissionGroupDialog,
    componentProps: { group: row },
  }).onOk(() => {
    tableRef.value?.refresh();
  });
};

const onEditPermissions = (row) => {
  $q.dialog({
    component: PermissionGroupDialog,
    componentProps: { group: row },
  });
};

const onDelete = (row) => {
  $q.dialog({
    title: "Confirmar exclusão",
    message: `Remover o grupo "${row.label}"?`,
    cancel: true,
    persistent: true,
  }).onOk(async () => {
    await deleteUserType(row.id);
    tableRef.value?.refresh();
  });
};
</script>
