---
import { authPB } from "src/utils/pocketbase";
import type { RecordModel } from 'pocketbase'

// export const prerender = false

const pb = await authPB()
const photos = await pb.collection('photos').getFullList({
    sort: '-created'
})

const getImageLink = async (record: any) => {
    return pb.files.getURL(record, record.image)
}
---

<script>
    let pos = 0;
    const dataElement = document.getElementById('carousel-data');
    const photos = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
    const cap = photos.length - 1;
    const img = document.getElementById('carousel-img') as HTMLImageElement;
    const titleEl = document.getElementById('photo-title');
    const cameraEl = document.getElementById('photo-camera');
    const locationEl = document.getElementById('photo-location');
    const currentPosIndicator = document.getElementById('current-pos');
    const maxPosIndicator = document.getElementById('max-pos');

    maxPosIndicator!.innerText = (cap + 1) as string
    currentPosIndicator!.innerText = (pos + 1) as string
    
    function updatePhoto() {
        const currentPhoto = photos[pos];

        currentPosIndicator!.innerText = (pos + 1) as string
        
        // Update image src
        if (img && currentPhoto) {
            const imageUrl = `/api/files/photos/${currentPhoto.id}/${currentPhoto.image}`;
            img.src = imageUrl;
        }
        
        // Update metadata
        if (titleEl) {
            titleEl.textContent = currentPhoto.title || "Untitled";
        }
        if (cameraEl) {
            cameraEl.textContent = currentPhoto.camera || "";
        }
        if (locationEl) {
            locationEl.textContent = currentPhoto.location || "";
        }
    }
    
    function inc() { 
        pos = pos === cap ? 0 : pos + 1;
        updatePhoto();
    }
    
    function dec() { 
        pos = pos === 0 ? cap : pos - 1;
        updatePhoto();
    }
    
    // make functions globally accessible
    (window as any).inc = inc;
    (window as any).dec = dec;
</script>

<!-- Hidden element to pass server data to client -->
    <div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
    
    <img id="carousel-img" class="rounded-lg w-full h-[calc(100vh-7rem)] object-contain" src={ pb.files.getURL(photos[0], photos[0].image) } />