<script setup>
import dayjs from "dayjs";
const profileStore = useProfileStore()
const router = useRouter()

const tickets = ref([])
const tenants = ref([])

const showClosedTickets = ref(false)
const selectedTenant = ref(null)

const setup = async () => {
  tickets.value = await useEntities("tickets").select("*,created_by(*), ticketmessages(*)", "created_at", false)



}

setup()

const filteredRows = computed(() => {
  let items = tickets.value

  if(!showClosedTickets.value) {
    items = items.filter(i => i.status !== "Geschlossen")
  }

  if(selectedTenant.value) {
    console.log(selectedTenant.value)
    console.log(items)
    console.log(items.filter(i => i.tenant.id === selectedTenant.value))
    items = items.filter(i => i.tenant.id === selectedTenant.value)
  }

  return items

})

</script>

<template>
  <UDashboardNavbar
    title="Support Tickets"
    :badge="filteredRows.length"
  >
    <template #right>
      <UButton
        @click="router.push('/support/create')"
      >
        + Ticket
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardToolbar>
    <template #left>
      <UCheckbox
        label="Geschlossene Tickets anzeigen"
        v-model="showClosedTickets"
      />
      <USelectMenu
          v-if="profileStore.currentTenant === 5"
        :ui-menu="{ width: 'min-w-max' }"
        :options="tenants"
        option-attribute="name"
        value-attribute="id"
        v-model="selectedTenant"
      >
        <template #label>
          {{selectedTenant ? tenants.find(i => i.id === selectedTenant).name : "Nicht nach Tenant filtern"}}
        </template>
      </USelectMenu>
    </template>
  </UDashboardToolbar>
  <UTable
    :rows="filteredRows"
    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
    @select="(i) => router.push(`/support/${i.id}`)"
    :columns="[{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'status',label:'Status'},{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}]"
  >
    <template #tenant-data="{ row }">
     {{row.tenant.name}}
    </template>
    <template #status-data="{ row }">
     <span v-if="row.status === 'Offen'" class="text-yellow-500">Offen</span>
     <span v-else-if="row.status === 'Geschlossen'" class="text-primary">Geschlossen</span>
    </template>
    <template #created_by-data="{ row }">
     {{row.created_by.fullName}}
    </template>
    <template #created_at-data="{ row }">
     {{dayjs(row.created_at).format('DD.MM.YYYY HH:mm')}}
    </template>
    <template #ticketmessages-data="{ row }">
     {{row.ticketmessages.length}}
    </template>
  </UTable>
</template>

<style scoped>

</style>
