<script setup lang="ts">
import type { InternalApi } from "nitropack/types";

const props = defineProps<{
  images: InternalApi["/api/gallery"]["get"][number][];
  initialIndex: number;
}>();

const emit = defineEmits<{ close: [number] }>();

const currentIndex = ref(props.initialIndex);
</script>

<template>
  <UModal
    fullscreen
    :dismissible="false"
    :ui="{ body: 'bg-black', header: 'hidden' }"
    @close:prevent="emit('close', currentIndex)"
  >
    <template #body>
      <div
        class="relative w-full h-full flex flex-col items-center justify-center"
      >
        <UButton
          icon="i-lucide-x"
          color="neutral"
          variant="link"
          size="xl"
          class="absolute top-4 right-4 z-10"
          aria-label="Close modal"
          @click="emit('close', currentIndex)"
        />

        <UCarousel
          v-slot="{ item }"
          :start-index="props.initialIndex"
          :items="images"
          :ui="{
            item: 'flex-shrink-0 flex flex-col items-center justify-center select-none',
          }"
          arrows
          :prev="{
            variant: 'link',
            icon: 'i-lucide-chevron-left',
            class: 'left-4!',
            ui: { leadingIcon: 'size-8' },
          }"
          :next="{
            variant: 'link',
            icon: 'i-lucide-chevron-right',
            class: 'right-4!',
            ui: { leadingIcon: 'size-8' },
          }"
          :duration="15"
          class="w-full h-full mt-10"
          @select="(index) => (currentIndex = index)"
        >
          <img
            :src="item.url"
            class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
          />

          <!-- metadata -->
          <div
            class="bg-black px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
          >
            <span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
            <span class="text-white/50">|</span>
            <span>{{ item.exif.camera }}</span>
            <span class="text-white/50">|</span>
            <span>{{ item.exif.lens }}</span>
            <span class="text-white/50">|</span>
            <span>{{ item.exif.settings.aperture }}</span>
            <span>{{ item.exif.settings.shutter }}</span>
            <span>ISO {{ item.exif.settings.iso }}</span>
            <span>{{ item.exif.settings.focalLength }}</span>
          </div>
        </UCarousel>

        <div class="text-white/70 text-sm">
          {{ currentIndex + 1 }} / {{ images.length }}
        </div>
      </div>
    </template>
  </UModal>
</template>
