<template>
  <v-chip size="small" variant="tonal" prepend-icon="mdi-paperclip" v-if="props.overview">
    Attached {{ props.attachments.length }} attachment(s)
  </v-chip>

  <v-card v-else variant="outlined" class="w-fit max-h-[540px]">
    <v-carousel
      hide-delimiter-background
      height="100%"
      :hide-delimiters="props.attachments.length <= 1"
      :show-arrows="false"
    >
      <v-carousel-item v-for="(item, idx) in attachments">
        <img
          v-if="item.type === 1"
          decoding="async"
          class="cursor-zoom-in max-h-[540px] object-cover object-c"
          :src="getUrl(item)"
          :alt="getFileName(item)"
          @click="openLightbox(item, idx)"
        />
        <video v-else-if="item.type === 2" controls class="w-full content-visibility-auto">
          <source :src="getUrl(item)" />
        </video>
        <div v-else-if="item.type === 3" class="w-[480px] py-12">
          <div class="text-center">
            <p class="mb-1">{{ getFileName(item) }}</p>
            <audio controls :src="getUrl(item)" class="mx-auto"></audio>
          </div>
        </div>
        <div v-else class="w-[480px] py-12">
          <div class="text-center">
            <p>{{ getFileName(item) }}</p>
            <a class="underline" target="_blank" :href="getUrl(item)">Download</a>
          </div>
        </div>
      </v-carousel-item>
    </v-carousel>

    <vue-easy-lightbox
      teleport="#app"
      :visible="lightbox"
      :imgs="props.attachments.map((x) => getUrl(x))"
      v-model:index="currentIndex"
      @hide="lightbox = false"
    >
      <template v-slot:close-btn="{ close }">
        <v-btn
          class="fixed left-2 top-2"
          icon="mdi-close"
          variant="text"
          color="white"
          :style="`margin-top: ${safeAreaTop}`"
          @click="close"
        />
      </template>
    </vue-easy-lightbox>
  </v-card>
</template>

<script setup lang="ts">
import { buildRequestUrl } from "@/scripts/request"
import { computed, ref } from "vue"
import { useUI } from "@/stores/ui"
import VueEasyLightbox from "vue-easy-lightbox"

const props = defineProps<{ attachments: any[]; overview?: boolean }>()

const ui = useUI()

const lightbox = ref(false)

const current = ref<any>(null)
const currentIndex = ref(0)

const safeAreaTop = computed(() => {
  return `${ui.safeArea.top}px`
})

function getFileName(item: any) {
  return item.filename.replace(/\.[^/.]+$/, "")
}

function getUrl(item: any) {
  return item.external_url
    ? item.external_url
    : buildRequestUrl("interactive", `/api/attachments/o/${item.file_id}`)
}

function openLightbox(item: any, idx: number) {
  current.value = item
  currentIndex.value = idx
  lightbox.value = true
}
</script>

<style>
.vel-model {
  z-index: 10;
}
</style>
