<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnFilter from 'components/VnTable/VnFilter.vue';
import VnTableOrder from 'src/components/VnTable/VnOrder.vue';

defineProps({
    columns: {
        type: Array,
        required: true,
    },
    chipLocale: {
        type: String,
        default: null,
    },
    searchUrl: {
        type: [String, Boolean],
        default: 'table',
    },
});
const { t } = useI18n();

const tableFilterRef = ref([]);

function columnName(col) {
    const column = { ...col, ...col.columnFilter };
    let name = column.name;
    if (column.alias) name = column.alias + '.' + name;
    return name;
}
</script>
<template>
    <VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
        <template #body="{ params, orders }">
            <div
                class="row no-wrap flex-center"
                v-for="col of columns.filter((c) => c.columnFilter ?? true)"
                :key="col.id"
            >
                <VnFilter
                    ref="tableFilterRef"
                    :column="col"
                    :data-key="$attrs['data-key']"
                    v-model="params[columnName(col)]"
                    :search-url="searchUrl"
                />
                <VnTableOrder
                    v-if="col?.columnFilter !== false && col?.name !== 'tableActions'"
                    v-model="orders[col.orderBy ?? col.name]"
                    :name="col.orderBy ?? col.name"
                    :data-key="$attrs['data-key']"
                    :search-url="searchUrl"
                    :vertical="true"
                />
            </div>
            <slot
                name="moreFilterPanel"
                :params="params"
                :orders="orders"
                :columns="columns"
            />
        </template>
        <template #tags="{ tag, formatFn }" v-if="chipLocale">
            <div class="q-gutter-x-xs">
                <strong>{{ t(`${chipLocale}.${tag.label}`) }}: </strong>
                <span>{{ formatFn(tag.value) }}</span>
            </div>
        </template>
    </VnFilterPanel>
</template>
