<script setup>
import { onMounted, ref } from "vue";
import { RouterLink } from "vue-router";
import { useSearcher } from "@Services/Api";
import { can, apiTo, viewTo, transl } from "./Module";

import Table from "@Holos/Table.vue";
import IconButton from "@Holos/Button/Icon.vue";
import PageHeader from "@Holos/PageHeader.vue";
import ConceptForm from "@App/ConceptSection.vue";
import DestroyView from "@Holos/Modal/Template/Destroy.vue";
import ModalController from "@Controllers/ModalController.js";

/** Controladores */
const Modal = new ModalController();

/** Propiedades */
const destroyModal = ref(Modal.destroyModal);
const editModal = ref(Modal.editModal);
const modelModal = ref(Modal.modelModal);

/** Inicializar searcher */
//const models = ref(searcher.models);
const models = ref({
  data: [],
  total: 0,
});
const processing = ref(false);
//const searcher = useSearcher(apiTo("index"));
const searcher = {
  models,
  processing,
  pagination: () => {},
  search: () => {},
};

/** Cargar datos iniciales */
onMounted(() => {
  searcher.search();
});
</script>
<template>
  <PageHeader title="Creación de Concepto" />
  <ConceptForm />
  <div class="m-3">
    <Table
      :items="models"
      :processing="searcher.processing.value"
      @send-pagination="(page) => searcher.pagination(page)"
    >
      <template #head>
        <th v-text="'Dirección'" />
        <th v-text="'Nombre corto'" />
        <th v-text="'Nombre'" />
        <th v-text="'Instrumento Legal'" />
        <th v-text="'Articulado'" />
        <th v-text="'Descripción'" />
        <th v-text="$t('actions')" class="w-32 text-center" />
      </template>
      <template #body="{ items }">
        <tr v-for="model in items" :key="model.id" class="table-row">
          <td class="table-cell border">
            {{ model.description }}
          </td>
          <td class="table-cell">
            <div class="table-actions">
              <IconButton
                v-if="can('edit') && ![1, 2].includes(model.id)"
                icon="license"
                :title="transl('permissions.title')"
                @click="Modal.switchEditModal(model)"
                outline
              />
              <RouterLink
                v-if="can('edit')"
                class="h-fit"
                :to="viewTo({ name: 'edit', params: { id: model.id } })"
              >
                <IconButton icon="edit" :title="$t('crud.edit')" outline />
              </RouterLink>
              <IconButton
                v-if="can('destroy') && ![1, 2].includes(model.id)"
                icon="delete"
                :title="$t('crud.destroy')"
                @click="Modal.switchDestroyModal(model)"
                outline
              />
            </div>
          </td>
        </tr>
      </template>
      <template #empty>
        <td colspan="2" class="table-cell text-center py-4 text-gray-500">
          No hay direcciones registradas
        </td>
      </template>
    </Table>
    <DestroyView
      v-if="can('destroy')"
      title="description"
      subtitle=""
      :model="modelModal"
      :show="destroyModal"
      :to="(address) => apiTo('destroy', { address: address.id })"
      @close="Modal.switchDestroyModal"
      @update="
        () => {
          const index = models.data.findIndex((m) => m.id === modelModal.id);
          if (index > -1) {
            models.data.splice(index, 1);
            models.total--;
          }
        }
      "
    />
  </div>
</template>
