<script setup>

const toast = useToast()
const supabase = useSupabaseClient()
const dataStore = useDataStore()
const profileStore = useProfileStore()
const router = useRouter()
const props = defineProps({
  documentData: {
    type: Object,
    required: true
  },
  openShowModal: {
    type: Boolean,
    required: false,
  },
  returnEmit: {
    type: Boolean
  }

})

let {documentData, openShowModal:openShowModalProp, returnEmit } = props;
const tags = dataStore.getDocumentTags
const openShowModal = ref(false)




//Functions
const openDocument = async () => {
  //selectedDocument.value = doc
  openShowModal.value = true
  console.log("open")
}

const updateDocument = async () => {
  console.log("Update")

  const {url, ...objData} = documentData
  delete objData.url


  const {data,error} = await supabase
      .from("documents")
      .update(objData)
      .eq('id',objData.id)
      .select()

  if(error) {
    console.log(error)
  } else {
    toast.add({title: "Dokument aktualisiert"})
    dataStore.fetchDocuments()
    //openShowModal.value = false
  }

}

const createVendorInvoice = async () => {
  const {data:vendorInvoiceData,error:vendorInvoiceError} = await supabase
      .from("incominginvoices")
      .insert([{
        document: documentData.id,
        tenant: profileStore.currentTenant
      }])
      .select()
  if(vendorInvoiceError) {
    console.log(vendorInvoiceError)
  } else if(vendorInvoiceData) {

    const {data:documentUpdateData,error:documentError} = await supabase
        .from("documents")
        .update({
          vendorInvoice: vendorInvoiceData[0].id
        })
        .eq('id',documentData.id)
        .select()

    if(documentError) {
      console.log(documentError)
    } else {
      toast.add({title: "Dokument aktualisiert"})
      dataStore.fetchDocuments()
      openShowModal.value = false
    }




    dataStore.fetchIncomingInvoices()
    await router.push("/receipts")
  }

}


const archiveDocument = () => {
  documentData.tags.push("Archiviert")
  updateDocument()
}

const resourceOptions = ref([
    {label: 'Projekt', value: 'project', optionAttr: "name"},
  {label: 'Kunde', value: 'customer', optionAttr: "name"},
  {label: 'Lieferant', value: 'vendor', optionAttr: "name"},
  {label: 'Fahrzeug', value: 'vehicle', optionAttr: "licensePlate"},
  {label: 'Objekt', value: 'plant', optionAttr: "name"},
  {label: 'Vertrag', value: 'contract', optionAttr: "name"},
  {label: 'Produkt', value: 'product', optionAttr: "name"}
])
const resourceToAssign = ref("project")
const itemOptions = ref([])
const idToAssign = ref(null)
const getItemsBySelectedResource = () => {
  if(resourceToAssign.value === "project") {
    itemOptions.value = dataStore.projects
  } else if(resourceToAssign.value === "customer") {
    itemOptions.value = dataStore.customers
  } else if(resourceToAssign.value === "vendor") {
    itemOptions.value = dataStore.vendors
  } else if(resourceToAssign.value === "vehicle") {
    itemOptions.value = dataStore.vehicles
  } else if(resourceToAssign.value === "product") {
    itemOptions.value = dataStore.products
  } else if(resourceToAssign.value === "plant") {
    itemOptions.value = dataStore.plants
  } else if(resourceToAssign.value === "contract") {
    itemOptions.value = dataStore.contracts
  } else {
    itemOptions.value =  []
  }
}
getItemsBySelectedResource()

const updateDocumentAssignment = async () => {
  documentData[resourceToAssign.value] = idToAssign.value
  await updateDocument()
}

</script>

<template>
  <div :id="`docDisplay-${documentData.id}`"  class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : openShowModal = true">
    <iframe
        :src="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
        class="previewEmbed"
        v-if="!documentData.tags.includes('Bild')"
        loading="lazy"
    />
    <img
      v-else
      alt=""
      :src="documentData.url"
    />
<!-- TODO: Remove Scrollbar    -->
    <UTooltip class="w-full" :text="documentData.path.split('/')[documentData.path.split('/').length -1]">
      <p class="truncate my-3">{{documentData.path.split("/")[documentData.path.split("/").length -1]}}</p>
    </UTooltip>

    <InputGroup class="mt-3 flex-wrap">
      <UBadge
        v-for="tag in documentData.tags"

      ><span class="text-nowrap">{{ tag }}</span></UBadge>
    </InputGroup>


<!--    <UButton
        @click="openDocument"
        class="mt-3"
        icon=""
    >
      <UIcon name="i-heroicons-eye-solid" />
    </UButton>-->
<!--    <UToggle
        v-model="documentData.selected"
        class="ml-2"
    />-->
<!--    <UBadge
      v-if="documentData.vendorInvoice"
    >{{dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice) ? dataStore.incominginvoices.find(item => item.id === documentData.vendorInvoice).reference : ''}}</UBadge>
    <UBadge
      v-if="documentData.inDatev"
    >DATEV</UBadge>-->
  </div>



  <USlideover
      v-model="openShowModal"
      fullscreen
  >
    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
      <template #header>
        <div class="flex flex-row justify-between">
          <div class="flex items-center gap-2">
            <UBadge
                v-for="tag in documentData.tags"
            >
              {{tag}}
            </UBadge>
          </div>
          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="openShowModal = false" />
        </div>

      </template>

      <UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
        <object
            class="bigPreview"
            :data="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
            type="application/pdf"
            v-if="!documentData.tags.includes('Bild')"

        />
        <img
          class=" w-full"
          :src="documentData.url"
          alt=""
          v-else
        />
      </UContainer>

      <template #footer>

        <UButtonGroup>
          <UButton
            @click="archiveDocument"
          >
            Archivieren
          </UButton>
          <UButton
            :to="documentData.url"
            variant="outline"
            icon="i-heroicons-arrow-top-right-on-square"
            target="_blank"
          >
            Öffnen
          </UButton>
<!--          <UButton
              v-if="documentData.tags.includes('Eingangsrechnung')"
              @click="createVendorInvoice"
          >
            Eingangsrechnung erstellen
          </UButton>-->
        </UButtonGroup>
<!--        <br>
        <a
          :href="documentData.url"
          target="_blank"
        >In neuen Tab anzeigen</a>-->

        <UFormGroup
          label="Tags ändern:"
        >
          <USelectMenu
              :options="tags"
              v-model="documentData.tags"
              @change="updateDocument"
              multiple
          >
            <template #label>
              {{documentData.tags.length}} ausgewählt
            </template>
          </USelectMenu>
        </UFormGroup>

        <p>Dokument zuweisen:</p>
        <UFormGroup
          label="Resource auswählen"
        >
          <USelectMenu
              :options="resourceOptions"
              v-model="resourceToAssign"
              value-attribute="value"
              option-attribute="label"
              @change="getItemsBySelectedResource"
          >

          </USelectMenu>
        </UFormGroup>
        <UFormGroup
          label="Eintrag auswählen:"
        >

        </UFormGroup>

        <USelectMenu
          :options="itemOptions"
          v-model="idToAssign"
          :option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
          value-attribute="id"
          @change="updateDocumentAssignment"
        ></USelectMenu>


<!--        <UFormGroup
            label="Projekt zuweisen:"
        >
          <USelectMenu
              :options="dataStore.projects"
              option-attribute="name"
              value-attribute="id"
              v-model="documentData.project"
              @change="updateDocument"
              searchable
              :search-attributes="['name']"
          >
            <template #label>
              {{dataStore.projects.find(item => item.id === documentData.project) ? dataStore.projects.find(item => item.id === documentData.project).name : "Kein Projekt ausgewählt" }}
            </template>
          </USelectMenu>
        </UFormGroup>

        <UFormGroup
            label="Kunde zuweisen:"
        >
          <USelectMenu
              :options="dataStore.customers"
              option-attribute="name"
              value-attribute="id"
              v-model="documentData.customer"
              @change="updateDocument"
              searchable
              :search-attributes="['name']"
          >
            <template #label>
              {{dataStore.customers.find(item => item.id === documentData.customer) ? dataStore.customers.find(item => item.id === documentData.customer).name : "Kein Kunde ausgewählt" }}
            </template>
          </USelectMenu>
        </UFormGroup>-->


      </template>
    </UCard>


<!--    <UCard class="h-full">












    </UCard>-->
  </USlideover>
</template>

<style scoped>
.documentListItem {
  display:block;
  width: 15vw;
  aspect-ratio: 1 / 1.414;
  padding:1em;
  margin: 0.7em;
  border: 1px solid lightgrey;
  border-radius: 15px;
}

.documentListItem:hover {
  border: 1px solid #69c350;
  cursor: pointer;
}

.previewEmbed {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  overflow: hidden !important;
  pointer-events: none !important;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

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

.bigPreview {
  width: 100%;
  aspect-ratio: 1/ 1.414;
}

</style>