---
import client from "@/data/pocketbase";
const { class: className, recipe } = Astro.props

async function getLink(img: string) {
    const record = await client.collection("images").getOne(img)
    const link = await client.files.getRelativeURL(record, record.image)
    return link
}

// Use Promise.all to wait for all async operations to complete
const links = await Promise.all(
    recipe.images.map((img: string) => getLink(img))
)

---

<script>
    let pos = 0;
    const dataElement = document.getElementById('carousel-data');
    const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
    const cap = links.length - 1;
    const img = document.getElementById('carousel-img') as HTMLImageElement;

    if (cap == 0) {
        const b0 = document.getElementById('dec-button')
        const b1 = document.getElementById('inc-button')

        b0!.hidden = true
        b1!.hidden = true
    }
    
    function inc() { 
        pos = pos === cap ? 0 : pos + 1;
        if (img) img.src = links[pos];
    }
    
    function dec() { 
        pos = pos === 0 ? cap : pos - 1;
        if (img) img.src = links[pos];
    }
    
    // make functions globally accessible
    (window as any).inc = inc;
    (window as any).dec = dec;
</script>

<div class={className}>
    <!-- Hidden element to pass server data to client -->
    <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
    
    <div class="relative flex items-center w-full h-60">
        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
        <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={links[0]} />
        <!-- <div class="w-70 h-60 bg-green-600" /> -->
        <button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
    </div>
</div>