<template>
  <div>
    <DefaultHeaderPage>
      <template #after>
        <q-btn
          color="primary"
          padding="8px 8px"
          :label="$t('common.actions.add')"
          icon="mdi-plus"
          class="q-mt-md"
          @click="onAddItem"
        />
      </template>
    </DefaultHeaderPage>
    <div>
      <DefaultTable
        ref="tableRef"
        :columns="columns"
        :api-call="getCountries"
        :delete-function="deleteCountry"
        :show-columns-select="false"
        :title="
          $t('common.terms.list') +
          ' ' +
          $t('common.ui.table.of') +
          ' ' +
          $t('ui.navigation.country')
        "
      >
        <template #body-cell-actions="{ row }">
          <q-btn
            outline
            style="width: 36px"
            class="q-ml-auto q-mr-sm"
            @click.prevent.stop="onRowClick(row)"
          >
            <q-icon name="mdi-file-edit-outline" />
          </q-btn>
        </template>
      </DefaultTable>
    </div>
  </div>
</template>
<script setup>
import { computed, defineAsyncComponent, useTemplateRef } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { permissionStore } from "src/stores/permission";
import { getCountries, deleteCountry } from "src/api/country";

import DefaultTable from "src/components/defaults/DefaultTable.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const AddEditCountryDialog = defineAsyncComponent(
  () => import("src/pages/country/components/AddEditCountryDialog.vue"),
);

const permission_store = permissionStore();
const $q = useQuasar();
const tableRef = useTemplateRef("tableRef");
const { t } = useI18n();

const columns = computed(() => [
  {
    name: "id",
    label: "ID",
    field: "id",
    align: "left",
    required: true,
    sortable: true,
  },
  {
    name: "nome",
    label: t("common.terms.name"),
    field: "name",
    align: "left",
    sortable: true,
  },
  {
    name: "code",
    label: t("common.terms.code"),
    field: "code",
    align: "center",
    sortable: true,
  },
  {
    name: "status",
    label: t("common.terms.status"),
    field: (row) =>
      row.status == "ACTIVE"
        ? t("common.status.active")
        : t("common.status.inactive"),
    align: "left",
    sortable: true,
  },
  {
    name: "actions",
    label: t("common.terms.actions"),
    align: "left",
    required: true,
  },
]);

const onRowClick = (row) => {
  if (permission_store.getAccess("config.country", "edit") === false) {
    $q.loading.hide();
    $q.notify({
      type: "negative",
      message: t("validation.permissions.edit"),
    });
    return;
  }
  $q.dialog({
    component: AddEditCountryDialog,
    componentProps: {
      country: row,
      title: () =>
        useI18n().t("common.actions.edit") +
        " " +
        useI18n().t("ui.navigation.country"),
    },
  }).onOk(async (success) => {
    if (success) {
      tableRef.value.refresh();
    }
  });
};

const onAddItem = () => {
  if (permission_store.getAccess("config.country", "add") === false) {
    $q.loading.hide();
    $q.notify({
      type: "negative",
      message: t("validation.permissions.add"),
    });
    return;
  }
  $q.dialog({
    component: AddEditCountryDialog,
    componentProps: {
      title: () =>
        useI18n().t("common.actions.add") +
        " " +
        useI18n().t("ui.navigation.country"),
    },
  }).onOk(async (success) => {
    if (success) {
      tableRef.value.refresh();
    }
  });
};
</script>
