<script setup>
import { useRoute, useRouter } from 'vue-router';
import { computed, ref, watch } from 'vue';

import VnPaginate from 'components/ui/VnPaginate.vue';

import { useArrayData } from 'composables/useArrayData';

const props = defineProps({
    dataKey: { type: String, required: true },
});

const route = useRoute();
const router = useRouter();

const paginateRef = ref(null);

const arrayData = useArrayData(props.dataKey);
const store = arrayData.store;

const data = computed(() => {
    const dataCopy = store.data;
    return dataCopy.sort((a, b) => a.role?.name.localeCompare(b.role?.name));
});

const filter = computed(() => ({
    where: {
        prindicpalType: 'USER',
        principalId: route.params.id,
    },
    include: {
        relation: 'role',
        scope: {
            fields: ['id', 'name', 'description'],
        },
    },
}));

const urlPath = 'RoleMappings';

const columns = computed(() => [
    {
        name: 'name',
    },
]);

watch(
    () => route.params.id,
    () => {
        store.url = urlPath;
        store.filter = filter.value;
        store.limit = 0;
        fetchSubRoles();
    }
);

const fetchSubRoles = () => paginateRef.value.fetch();

const redirectToRoleSummary = (id) =>
    router.push({ name: 'RoleSummary', params: { id } });
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <div class="full-width" style="max-width: 400px">
            <VnPaginate
                ref="paginateRef"
                :data-key="dataKey"
                :filter="filter"
                :url="urlPath"
                :limit="0"
                auto-load
            >
                <template #body>
                    <QTable :rows="data" :columns="columns" hide-header>
                        <template #body="{ row }">
                            <QTr
                                @click="redirectToRoleSummary(row.role?.id)"
                                class="cursor-pointer"
                            >
                                <QTd>
                                    <div class="column">
                                        <span>{{ row.role?.name }}</span>
                                        <span class="color-vn-label">{{
                                            row.role?.description
                                        }}</span>
                                    </div>
                                </QTd>
                            </QTr>
                        </template>
                    </QTable>
                </template>
            </VnPaginate>
        </div>
    </QPage>
</template>

<i18n>
es:
    Role removed. Changes will take a while to fully propagate.: Rol eliminado. Los cambios tardaran un tiempo en propagarse completamente.
    Role added! Changes will take a while to fully propagate.: ¡Rol añadido! Los cambios tardaran un tiempo en propagarse completamente.
    El rol va a ser eliminado: Role will be removed
    ¿Seguro que quieres continuar?: Are you sure you want to continue?
</i18n>
