<script setup lang="ts">
import { useGalleryStore } from "../stores/gallery";
// @ts-ignore
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { convertFileSrc } from "@tauri-apps/api/core";

const store = useGalleryStore();

const onSelect = (index: number) => {
    store.selectImage(index);
};
</script>

<template>
  <div class="h-full w-full bg-gray-900">
    <RecycleScroller
      class="h-full"
      :items="store.images"
      :item-size="100"
      key-field="path"
      direction="horizontal"
    >
      <template #default="{ item, index }">
        <div 
            class="h-full w-[100px] p-2 cursor-pointer transition-colors"
            :class="{'bg-blue-600': store.selectedIndex === index, 'hover:bg-gray-700': store.selectedIndex !== index}"
            @click="onSelect(index)"
        >
          <div class="h-full w-full bg-gray-800 flex items-center justify-center overflow-hidden rounded border border-gray-600">
             <!-- Use generated thumbnail -->
             <img 
                :src="convertFileSrc(item.thumbnail)" 
                class="w-full h-full object-cover" 
                loading="lazy" 
                decoding="async"
                fetchpriority="low"
             />
          </div>
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>
