<script setup>
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';

const tableRef = ref();
const { t } = useI18n();
const stateStore = useStateStore();

const exprBuilder = (param, value) => {
    switch (param) {
        case 'search':
            return /^\d+$/.test(value)
                ? { id: value }
                : { alias: { like: `%${value}%` } };
    }
};
const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('Id'),
        isId: true,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'alias',
        label: t('Alias'),
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'description',
        label: t('Description'),
        cardVisible: true,
        create: true,
    },
]);
</script>

<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <VnSearchbar
                data-key="AccountAliasList"
                url="MailAliases"
                :expr-builder="exprBuilder"
                :label="t('mailAlias.search')"
                :info="t('mailAlias.searchInfo')"
            />
        </Teleport>
    </template>
    <VnTable
        ref="tableRef"
        data-key="AccountAliasList"
        url="MailAliases"
        :create="{
            urlCreate: 'MailAliases',
            title: 'Create MailAlias',
            onDataSaved: ({ id }) => tableRef.redirect(id),
            formInitialData: {},
        }"
        order="id DESC"
        :columns="columns"
        :disable-option="{ card: true }"
        default-mode="table"
        redirect="account/alias"
        :is-editable="true"
        :use-model="true"
    />
</template>

<i18n>
    es:
        Id: Id
        Alias: Alias
        Description: Descripción
</i18n>
