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

  <v-responsive v-else :aspect-ratio="16 / 9" max-height="720">
    <v-card variant="outlined" class="w-full h-full">
      <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"
            loading="lazy"
            decoding="async"
            class="cursor-zoom-in content-visibility-auto w-full h-full object-contain"
            :src="getUrl(item)"
            :alt="item.filename"
            @click="openLightbox(item, idx)"
          />
          <video v-if="item.type === 2" controls class="w-full content-visibility-auto">
            <source :src="getUrl(item)" />
          </video>
          <div v-if="item.type === 3" class="w-full px-7 py-12">
            <audio controls :src="getUrl(item)" class="mx-auto"></audio>
          </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>
  </v-responsive>
</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 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>
