<script setup>
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { useRoute } from 'vue-router';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RoleSummary from './Card/RoleSummary.vue';
import VnCardMain from 'src/components/common/VnCardMain.vue';

const route = useRoute();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});
const tableRef = ref();
const url = 'VnRoles';
const dataKey = 'AccountRoleList';

const entityId = computed(() => $props.id || route.params.id);
const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('Id'),
        isId: true,
        columnFilter: {
            inWhere: true,
            component: 'select',
            name: 'search',
            attrs: {
                url: 'VnRoles',
                fields: ['id', 'name'],
            },
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'name',
        label: t('Name'),
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'description',
        label: t('Description'),
        cardVisible: true,
        create: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, RoleSummary),
                isPrimary: true,
            },
        ],
    },
]);
const exprBuilder = (param, value) => {
    switch (param) {
        case 'search':
            return /^\d+$/.test(value)
                ? { id: value }
                : {
                      or: [
                          { name: { like: `%${value}%` } },
                          { nickname: { like: `%${value}%` } },
                      ],
                  };
        case 'name':
        case 'description':
            return { [param]: { like: `%${value}%` } };
    }
};
</script>

<template>
    <VnCardMain
        :section="dataKey"
        :data-key="dataKey"
        :columns="columns"
        prefix="role"
        :array-data-props="{ url, exprBuilder, order: 'id ASC' }"
    >
        <template #body>
            <VnTable
                ref="tableRef"
                :data-key="dataKey"
                :create="{
                    urlCreate: 'VnRoles',
                    title: t('Create rol'),
                    onDataSaved: ({ id }) => tableRef.redirect(id),
                    formInitialData: {
                        editorFk: entityId,
                    },
                }"
                :disable-option="{ card: true }"
                :columns="columns"
                default-mode="table"
                redirect="account/role"
                :right-search="false"
            />
        </template>
    </VnCardMain>
</template>

<i18n>
    es:
        Id: Id
        Description: Descripción
        Name: Nombre
</i18n>
