<template>
  <EntityList
      type="contacts"
      :items="items"
  ></EntityList>

  <!--  <UDashboardNavbar title="Ansprechpartner" :badge="filteredRows.length">
    <template #right>
      <UInput
          id="searchinput"
          v-model="searchString"
          icon="i-heroicons-funnel"
          autocomplete="off"
          placeholder="Suche..."
          class="hidden lg:block"
          @keydown.esc="$event.target.blur()"
      >
        <template #trailing>
          <UKbd value="/" />
        </template>
      </UInput>

      <UButton @click="router.push(`/contacts/create`)">+ Kontakt</UButton>
    </template>
  </UDashboardNavbar>

  <UDashboardToolbar>
    <template #right>
      <USelectMenu
          v-model="selectedColumns"
          icon="i-heroicons-adjustments-horizontal-solid"
          :options="templateColumns"
          multiple
          class="hidden lg:block"
          by="key"
      >
        <template #label>
          Spalten
        </template>
      </USelectMenu>
    </template>
  </UDashboardToolbar>

  <UTable
      :rows="filteredRows"
      :columns="columns"
      class="w-full"
      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
      @select="(i) => router.push(`/contacts/show/${i.id}`)"
      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Ansprechpartner anzuzeigen' }"
  >
    <template #fullName-data="{row}">
      <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.fullName}}</span>
      <span v-else>{{row.fullName}}</span>
    </template>
    <template #active-data="{row}">
      <span v-if="row.active" class="text-primary-500">Aktiv</span>
      <span v-else class="text-rose">Gesperrt</span>
    </template>
    <template #customer-data="{row}">
      {{row.customer ? row.customer.name : ""}}
    </template>
    <template #vendor-data="{row}">
      {{row.vendor ? row.vendor.name : ""}}
    </template>
  </UTable>-->
</template>

<script setup>
import EntityList from "~/components/EntityList.vue";

definePageMeta({
  middleware: "auth"
})

const items = ref([])

const setupPage = async () => {
  items.value = await useSupabaseSelect("contacts","*, customer(name), vendor(name)")
}

setupPage()

const templateColumns = [


]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))

const searchString = ref('')

/*const filteredRows = computed(() => {
  if(!searchString.value) {
    return dataStore.contacts
  }

  return dataStore.contacts.filter(item => {
    return Object.values(item).some((value) => {
      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
    })
  })
})*/

const filteredRows = computed(() => {
  return useSearch(searchString.value, items.value)
})

</script>

<style scoped>

</style>