<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);

const shouldLoad = (index: number) => {
  return Math.abs(index - currentIndex.value) <= 2;
};

const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
  const aspectRatio = image.height / image.width;
  const placeholderWidth = 600;
  const placeholderHeight = Math.round(aspectRatio * placeholderWidth);
  return [placeholderWidth, placeholderHeight, 70, 3] as [
    width: number,
    height: number,
    quality: number,
    blur: number,
  ];
};
</script>

<template>
  <UModal
    fullscreen
    :dismissible="false"
    :ui="{ body: 'bg-black p-0!', header: 'hidden' }"
    title="Gallery carousel"
    description="View all the images in a carousel"
    @close:prevent="emit('close', currentIndex)"
  >
    <template #body>
      <div class="relative flex flex-col items-center justify-center">
        <UCarousel
          ref="carousel"
          v-slot="{ item, index }"
          :start-index="props.initialIndex"
          :items="images"
          :ui="{
            item: 'relative flex-shrink-0 h-screen 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-screen h-screen"
          @select="(index) => (currentIndex = index)"
        >
          <NuxtImg
            v-if="shouldLoad(index)"
            :src="item.url"
            :width="1920"
            :placeholder="getPlaceholder(item)"
            class="xs:max-w-[95vw] sm:max-w-[90vw] md:h-[80vh] object-contain rounded-sm"
          />

          <!-- metadata -->
          <p
            class="font-[JetBrains_Mono] text-xs lg:text-sm bottom-13 absolute invisible md:visible"
          >
            <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 }}
              {{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
              {{ item.exif.settings.focalLength }}</span
            >
          </p>

          <p
            class="font-[JetBrains_Mono] text-xs bottom-16 absolute sm:invisible text-center"
          >
            <span>- {{ new Date(item.exif.date).toLocaleDateString() }} -</span>
            <br />
            <span>{{ item.exif.camera }}</span>
            <br />
            <span>{{ item.exif.lens }}</span>
            <br />
            <span
              >{{ item.exif.settings.aperture }}
              {{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
              {{ item.exif.settings.focalLength }}</span
            >
          </p>

          <p
            class="font-[JetBrains_Mono] text-xs bottom-13 absolute invisible sm:visible md:invisible text-center"
          >
            <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>
            <br />
            <span
              >{{ item.exif.settings.aperture }}
              {{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
              {{ item.exif.settings.focalLength }}</span
            >
          </p>
        </UCarousel>

        <UButton
          icon="i-lucide-x"
          color="neutral"
          variant="link"
          size="xl"
          class="absolute top-2 right-2 lg:top-4 lg:right-4 xl:top-6 xl:rizght-6"
          aria-label="Close modal"
          @click="emit('close', currentIndex)"
        />

        <p
          class="text-white/70 text-sm absolute bottom-6 left-1/2 -translate-x-1/2"
        >
          {{ currentIndex + 1 }} / {{ images.length }}
        </p>
      </div>
    </template>
  </UModal>
</template>
