<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import VnCard from 'components/common/VnCard.vue';
import ZoneDescriptor from './ZoneDescriptor.vue';
import ZoneSearchbar from './ZoneSearchbar.vue';

const { t } = useI18n();
const route = useRoute();

const routeName = computed(() => route.name);
const customRouteRedirectName = computed(() => {
    if (routeName.value === 'ZoneLocations') return null;
    return routeName.value;
});
const searchbarMakeFetch = computed(() => routeName.value !== 'ZoneEvents');
const searchBarDataKeys = {
    ZoneWarehouses: 'ZoneWarehouses',
    ZoneSummary: 'ZoneSummary',
    ZoneLocations: 'ZoneLocations',
    ZoneEvents: 'ZoneEvents',
};
</script>

<template>
    <VnCard
        data-key="Zone"
        :descriptor="ZoneDescriptor"
        :search-data-key="searchBarDataKeys[routeName]"
        :filter-panel="ZoneFilterPanel"
        :searchbarProps="{
            url: 'Zones',
            label: t('list.searchZone'),
            info: t('list.searchInfo'),
        }"
    >
        <template #searchbar>
            <ZoneSearchbar />
        </template>
    </VnCard>
</template>
