<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 VnSearchbar from 'src/components/ui/VnSearchbar.vue';

import { useStateStore } from 'stores/useStateStore';

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

const routeName = computed(() => route.name);
const searchBarDataKeys = {
    ZoneWarehouses: 'ZoneWarehouses',
    ZoneSummary: 'ZoneSummary',
};
</script>
<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <VnSearchbar
                :data-key="searchBarDataKeys[routeName]"
                :custom-route-redirect-name="routeName"
                :label="t('list.searchZone')"
                :info="t('list.searchInfo')"
            />
        </Teleport>
    </template>
    <VnCard
        data-key="Zone"
        base-url="Zones"
        :descriptor="ZoneDescriptor"
        searchbar-data-key="ZoneList"
        searchbar-url="Zones"
        searchbar-label="Search zones"
        searchbar-info="You can search by zone reference"
    />
</template>
