<template>
  <CatalogPage
    :items="items"
    :loading="isLoading"
    map-id="suppliers-map"
    point-color="#3b82f6"
    :selected-id="selectedSupplierId"
    @select="onSelectSupplier"
  >
    <template #card="{ item }">
      <SupplierCard :supplier="item" />
    </template>

    <template #pagination>
      <PaginationLoadMore
        :shown="items.length"
        :total="total"
        :can-load-more="canLoadMore"
        :loading="isLoadingMore"
        @load-more="loadMore"
      />
    </template>

    <template #empty>
      <Text tone="muted">{{ t('catalogSuppliersSection.empty.no_suppliers') }}</Text>
    </template>
  </CatalogPage>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})

const { t } = useI18n()

const {
  items,
  total,
  isLoading,
  isLoadingMore,
  canLoadMore,
  loadMore,
  init
} = useCatalogSuppliers()

// Selected supplier for map highlighting
const selectedSupplierId = ref<string>()

const onSelectSupplier = (supplier: any) => {
  selectedSupplierId.value = supplier.uuid || supplier.teamUuid
}

await init()

useHead(() => ({
  title: t('catalogSuppliersSection.header.title')
}))
</script>
