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

import ModalController    from '@Controllers/ModalController.js';

import IconButton      from '@Holos/Button/Icon.vue'
import DestroyView     from '@Holos/Modal/Template/Destroy.vue';
import SearcherHead    from '@Holos/Searcher.vue';
import Table           from '@Holos/Table.vue';
import Permissions     from './Modals/Permissions.vue';

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

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

const models = ref([]);

const searcher = useSearcher({
    url: apiTo('index'),
    onSuccess: (r) => models.value = r.models,
    onError: () => models.value = []
});

/** Ciclos */
onMounted(() => {
    searcher.search();
});
</script>  

<template>
    <div>
        <SearcherHead
            :title="transl('title')"
            @search="(x) => searcher.search(x)"
        >
            <RouterLink
                v-if="can('create')"
                :to="viewTo({ name: 'create' })"
            >
                <IconButton
                    class="text-white"
                    icon="add"
                    :title="$t('crud.create')"
                    filled
                />
            </RouterLink>
            <IconButton
                icon="refresh"
                :title="$t('refresh')"
                @click="searcher.search()"
            />
        </SearcherHead>
        <div class="pt-2 space-y-2 w-full px-4">
            <p class="text-sm text-gray-600">
                {{ transl('description') }}
            </p>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <Table
                    :items="models"
                    @send-pagination="(page) => searcher.pagination(page)"
                    :processing="searcher.processing"
                >
                    <template #head>
                        <th class="px-6 py-3 text-left text-sm font-semibold" v-text="$t('name')" />
                        <th class="px-6 py-3 text-center text-sm font-semibold w-32" v-text="$t('actions')" />
                    </template>
                    <template #body="{items}">
                        <tr v-for="model in items" class="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 text-sm text-gray-700">
                                {{ model.description }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-center items-center space-x-2">
                                <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>
                </Table>
            </div>
        </div>
        
        <Permissions
            v-if="can('index')"
            :show="editModal" 
            :model="modelModal" 
            @close="Modal.switchEditModal"
        />
        <DestroyView
            v-if="can('destroy')"
            title="description"
            subtitle=""
            :model="modelModal"
            :show="destroyModal"
            :to="(role) => apiTo('destroy', { role })"
            @close="Modal.switchDestroyModal"
            @update="searcher.search()"
        />
    </div>
</template>
    