<template>
  <v-dialog v-model="overlay" v-if="overlay" width="100%" height="100%" opacity="50">
    <v-row align="center" justify="center" class="fill-height" style="position: relative;">
      <v-carousel hide-delimiters width="100%" height="100%" :show-arrows="files.length > 1 ? 'hover' : false"
        v-model="activeIndex">
        <template v-for="x, index in files" :key="x || index">
          <template v-if="fileTypes?.[x] === 'image'">
            <v-carousel-item height="100%" width="100%" rounded="lg">
              <v-row no-gutters class="w-100 h-100" align="center">
                <v-img :lazy-src="getFileUrl(x)" :src="getFileUrl(x)" width="70%" height="70%"
                  :alt="'Image Viewer Card -' + index"></v-img>
              </v-row>
              <template v-slot:placeholder>
                <div class="d-flex align-center justify-center fill-height">
                  <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
                </div>
              </template>
            </v-carousel-item>
          </template>
          <template v-else-if="fileTypes?.[x] === 'video'">
            <v-carousel-item>
              <v-row no-gutters class="h-100 w-100" align="center" justify="center">
                <video width="80%" height="80%" controls>
                  <source :src="getFileUrl(x)" />
                </video>
              </v-row>
              <template v-slot:placeholder>
                <div class="d-flex align-center justify-center fill-height">
                  <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
                </div>
              </template>
            </v-carousel-item>
          </template>
          <template v-else>
            <v-carousel-item>
              <v-row no-gutters class="h-100 w-100" align="center" justify="center">
                <v-icon size="100" color="white">mdi-file</v-icon>
              </v-row>
            </v-carousel-item>
          </template>
        </template>

        <template v-slot:prev="{ props }">
          <v-btn color="white" variant="outlined" class="text-white" icon="mdi-chevron-left"
            @click="props.onClick"></v-btn>
        </template>
        <template v-slot:next="{ props }">
          <v-btn color="white" class="text-white" variant="outlined" icon="mdi-chevron-right"
            @click="props.onClick"></v-btn>
        </template>
      </v-carousel>
      <div style="position: absolute; top: 2%; left: 0%; right: 0%; z-index: 2"
        class="cursor-pointer text-white text-h6 custom-shadow d-flex justify-space-between" @click="overlay = false">
        <v-row no-gutters style="position: relative">
          <v-col cols="8" xs="6" sm="2" md="2" lg="2">
            <v-btn prepend-icon="mdi-close" text="Close" rounded="lg" color="secondary" class="ml-2"
              style="position: absolute;"></v-btn>
          </v-col>

        </v-row>

      </div>
      <span class="text-white text-16px d-flex w-100 mt-2 justify-center"
        style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">{{ `${activeIndex +
          1}/${files.length}`
        }}</span>

    </v-row>
  </v-dialog>
</template>

<script setup lang="ts">
const props = defineProps({
  activeFileId: {
    type: String,
    required: false,
  },
  files: {
    type: Array as PropType<string[]>,
    default: []
  }
});


const { getFileUrl, urlToFile } = useFile()
const overlay = defineModel({ required: true, default: false });
const activeIndex = ref(0);
const fileTypes = ref<Record<string, "image" | "video" | "other">>({});


const emit = defineEmits(['share', 'like'])

watchEffect(() => {
  if (props.activeFileId && props.files.length > 0) {
    const index =
      props.files?.findIndex((x) => x == props.activeFileId) || 0;
    if (index !== -1) {
      activeIndex.value = index;
    } else activeIndex.value = 0;
  } else {
    return (activeIndex.value = 0);
  }
});

async function resolveFileTypes() {
  fileTypes.value = {}; // reset

  for (const x of props.files) {
    try {
      const url = getFileUrl(x);
      const file = await urlToFile(url, x);
      const type = file?.type;
     

      if (type?.startsWith("video")) fileTypes.value[x] = "video";
      else if (type?.startsWith("image")) fileTypes.value[x] = "image";
      else fileTypes.value[x] = "other";

    } catch (err) {
      fileTypes.value[x] = "other";
    }
  }
}

watch(
  () => props.files,
  () => resolveFileTypes(),
  { immediate: true }
);


</script>

<style scoped>
.custom-shadow {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
</style>
