<script setup>

import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";

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

})

let {documentData, returnEmit } = props;


const showFile = (file) => {
  console.log(file)
  modal.open(DocumentDisplayModal,{
    documentData: file
  })
}



</script>

<template>
  <div :id="`docDisplay-${documentData.id}`"  class="documentListItem" @click="returnEmit ? $emit('clicked', documentData.id) : showFile(documentData)">
    <iframe
        :src="`${documentData.url}#toolbar=0&navpanes=0&scrollbar=0`"
        class="previewEmbed"
        v-if="documentData.path.includes('pdf')"
        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.filetags"

      ><span class="text-nowrap">{{ tag.name }}</span></UBadge>
    </InputGroup>
  </div>
</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;
}

</style>