<script setup>
import dayjs from "dayjs";

definePageMeta({
  middleware: "auth"
})

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

//Working
const mode = ref(route.params.mode || "show")

const itemInfo = ref({
  vendor: 0,
  expense: true,
  reference: "",
  date:  null,
  dueDate: null,
  paymentType: "Überweisung",
  description: "",
  state: "Entwurf",
  accounts: [
    {
      account: null,
      amountNet: null,
      amountTax: null,
      taxType: "19",
      costCentre: null
    }
  ]
})




//Functions

const currentDocument = ref(null)

const loading = ref(true)

const setupPage = async () => {
  if((mode.value === "show") && route.params.id){
    itemInfo.value = await useSupabaseSelectSingle("incominginvoices",route.params.id,"*, files(*), vendor(*)")
    currentDocument.value = await useFiles().selectDocument(itemInfo.value.files[0].id)
  }
  loading.value = false
}

const setState = async (newState) => {
  if(mode.value === 'show') {
    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
  } else if(mode.value === 'edit') {
    await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
  }
  await router.push("/incomingInvoices")
}



setupPage()
</script>

<template>
  <UDashboardNavbar :title="'Eingangsbeleg anzeigen'">
    <template #right>
      <UButton
          @click="setState('Gebucht')"
          v-if="itemInfo.state !== 'Gebucht'"
          color="rose"
      >
        Status auf Gebucht
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent v-if="!loading">

    <div
        class="flex justify-between mt-5"
    >
      <object
          v-if="currentDocument ? currentDocument.url : false"
          :data="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
          type="application/pdf"
          class="mx-5 w-2/5 documentPreview"
      />
      <div class="w-1/2 mx-5">
        <UCard class="truncate mb-5">
          <p>Status: {{itemInfo.state}}</p>
          <p>Datum: {{dayjs(itemInfo.date).format('DD.MM.YYYY')}}</p>
          <p>Fälligkeitsdatum: {{dayjs(itemInfo.dueDate).format('DD.MM.YYYY')}}</p>
          <p v-if="itemInfo.vendor">Lieferant: <nuxt-link :to="`/standardEntity/vendors/show/${itemInfo.vendor}`">{{itemInfo.vendor.name}}</nuxt-link></p>
          <p>Bezahlt: {{itemInfo.paid ? "Ja" : "Nein"}}</p>
          <p>Beschreibung: {{itemInfo.description}}</p>

          <!--     TODO: Buchungszeilen darstellen     -->
        </UCard>

        <UCard class="scrollContainer">
          <HistoryDisplay
              type="incomingInvoice"
              v-if="itemInfo"
              :element-id="itemInfo.id"
              render-headline
          />
        </UCard>

      </div>
    </div>
  </UDashboardPanelContent>
  <UProgress class="mt-3 mx-3" v-else animation="carousel"/>




</template>

<style scoped>
.documentPreview {
  aspect-ratio: 1 / 1.414;
}



.scrollContainer {
  overflow-y: scroll;
  padding-left: 1em;
  padding-right: 1em;
  height: 75vh;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollContainer::-webkit-scrollbar {
  display: none;
}


.lineItemRow {
  display: flex;
  flex-direction: row;
}
</style>