<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="max-w-[540px] max-h-[720px]">
    <v-carousel hide-delimiter-background height="100%" :show-arrows="false">
      <v-carousel-item v-for="item in attachments">
        <img v-if="item.type === 1" :src="getUrl(item)" :alt="item.filename" class="cursor-zoom-in"
             @click="openLightbox" />
        <video v-if="item.type === 2" controls class="w-full">
          <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="[getUrl(current)]" @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 focus = ref(0)

const current = computed(() => props.attachments[focus.value])
const canLightbox = computed(() => current.value.type === 1)

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() {
  if (canLightbox.value) {
    lightbox.value = true
  }
}
</script>

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