<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 ZoneFilterPanel from '../ZoneFilterPanel.vue';

const { t } = useI18n();
const route = useRoute();
const routeName = computed(() => route.name);

function notIsLocations(ifIsFalse, ifIsTrue) {
    if (routeName.value != 'ZoneLocations') return ifIsFalse;
    return ifIsTrue;
}
</script>

<template>
    <VnCard
        data-key="zone"
        :base-url="notIsLocations('Zones', undefined)"
        :descriptor="ZoneDescriptor"
        :filter-panel="notIsLocations(ZoneFilterPanel, undefined)"
        :search-data-key="notIsLocations('ZoneList', undefined)"
        :custom-url="`Zones/${route.params?.id}/getLeaves`"
        :searchbar-props="{
            url: notIsLocations('Zones', 'ZoneLocations'),
            label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
            info: t('list.searchInfo'),
            whereFilter: notIsLocations((value) => {
                return /^\d+$/.test(value)
                    ? { id: value }
                    : { name: { like: `%${value}%` } };
            }),
        }"
    />
</template>
