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


const props = defineProps({
  queryStringData: {
    type: String
  },
  item: {
    type: Object,
    required: true
  },
  topLevelType: {
    type: String,
    required: true
  },
  platform: {
    type: String,
    required: true
  }
})

const statementallocations = ref([])
const incominginvoices = ref([])

const setup = async () => {
  //statementallocations.value = (await supabase.from("statementallocations").select("*, bs_id(*)").eq("account", route.params.id).eq("tenant",profileStore.currentTenant).order("created_at",{ascending: true})).data
  //incominginvoices.value = (await useSupabaseSelect("incominginvoices", "*, vendor(*)")).filter(i => i.accounts.find(x => x.account == route.params.id))
}

setup()

const selectAllocation = (allocation) => {
  if(allocation.type === "statementallocation") {
    router.push(`/banking/statements/edit/${allocation.bs_id.id}`)
  } else if(allocation.type === "incominginvoice") {
    router.push(`/incominginvoices/show/${allocation.incominginvoiceid}`)
  }
}

const renderedAllocations = computed(() => {

  let tempstatementallocations = props.item.statementallocations.map(i => {
    return {
      ...i,
      type: "statementallocation",
      date: i.bs_id.date,
      partner: i.bs_id ? (i.bs_id.debName ? i.bs_id.debName : (i.bs_id.credName ? i.bs_id.credName : '')) : ''
    }
  })


  /*let incominginvoicesallocations = []

  incominginvoices.value.forEach(i => {

    incominginvoicesallocations.push(...i.accounts.filter(x => x.account == route.params.id).map(x => {
      return {
        ...x,
        incominginvoiceid: i.id,
        type: "incominginvoice",
        amount: x.amountGross ? x.amountGross : x.amountNet,
        date: i.date,
        partner: i.vendor.name,
        description: i.description,
        color: i.expense ? "red" : "green"
      }
    }))
  })*/

  return [...tempstatementallocations/*, ... incominginvoicesallocations*/]
})


</script>

<template>
  <UCard class="mt-5">
    <UTable
        v-if="props.item.statementallocations"
        :rows="renderedAllocations"
        :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 || row.color === 'red'">{{useCurrency(row.amount)}}</span>
        <span class="text-right text-primary-500" v-else-if="row.amount > 0 || row.color === 'green'">{{useCurrency(row.amount)}}</span>
        <span v-else>{{useCurrency(row.amount)}}</span>
      </template>
      <template #date-data="{row}">
        {{row.date ? dayjs(row.date).format('DD.MM.YYYY') : ''}}
      </template>
      <template #description-data="{row}">
        {{row.description ? row.description : ''}}
      </template>
    </UTable>
  </UCard>

</template>

<style scoped>

</style>