<script setup>

import dayjs from "dayjs";

const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()
const profileStore = useProfileStore()

const itemInfo = ref(null)
const statementallocations = ref(null)

const setup = async () => {
  itemInfo.value = (await supabase.from("accounts").select("*").eq("id",route.params.id).single()).data
  statementallocations.value = (await supabase.from("statementallocations").select("*, bs_id(*)").eq("account", route.params.id).eq("tenant",profileStore.currentTenant).order("created_at",{ascending: true})).data
}

setup()

const selectAllocation = (allocation) => {
  if(allocation.bs_id) {
    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
  }
}


</script>

<template>
  <UDashboardNavbar>
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
      >
        Zurück
      </UButton>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/accounts`)"
      >
        Übersicht
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="itemInfo"
          :class="['text-xl','font-medium']"
      >{{itemInfo ? `Buchungskonto: ${itemInfo.number} - ${itemInfo.label}`: '' }}</h1>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <UTabs :items="[{label: 'Information'},{label: 'Buchungen'}]">
      <template #item="{item}">
        <UCard class="mt-5" v-if="item.label === 'Information'">
          <div class="text-wrap">
            <table class="w-full" v-if="itemInfo">
              <tr>
                <td>Nummer:</td>
                <td>{{itemInfo.number}}</td>
              </tr>
              <tr>
                <td>Name:</td>
                <td>{{itemInfo.label}}</td>
              </tr>
              <tr>
                <td>Beschreibung:</td>
                <td>{{itemInfo.description}}</td>
              </tr>

            </table>
          </div>
        </UCard>
        <UCard class="mt-5" v-if="item.label === 'Buchungen'">
          <UTable
              v-if="statementallocations"
            :rows="statementallocations"
              :columns="[{key:'amount', label:'Betrag'},{key:'date', label:'Datum'},{key:'partner', label:'Partner'},{key:'description', label:'Beschreibung'}]"
              @select="(i) => selectAllocation(i)"
              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
          >
            <template #amount-data="{row}">
              <span class="text-right text-rose-600" v-if="row.amount < 0">{{useCurrency(row.amount)}}</span>
              <span class="text-right text-primary-500" v-else-if="row.amount > 0">{{useCurrency(row.amount)}}</span>
              <span v-else>{{useCurrency(row.amount)}}</span>
            </template>
            <template #date-data="{row}">
              {{row.bs_id ? dayjs(row.bs_id.date).format('DD.MM.YYYY') : ''}}
            </template>
            <template #partner-data="{row}">
              {{row.bs_id ? (row.bs_id.debName ? row.bs_id.debName : (row.bs_id.credName ? row.bs_id.credName : '')) : ''}}
            </template>
            <template #description-data="{row}">
              {{row.description ? row.description : ''}}
            </template>
          </UTable>
        </UCard>
      </template>
    </UTabs>
  </UDashboardPanelContent>
</template>

<style scoped>
td {
  border-bottom: 1px solid lightgrey;
  vertical-align: top;
  padding-bottom: 0.15em;
  padding-top: 0.15em;
}
</style>