---
import BaseLayout from '../layouts/BaseLayout.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import Bubble from '../components/Bubble.astro'

import macchinisti from '@/data/macchinisti.yaml'
macchinisti.sort((a, b) => b.entranceDate - a.entranceDate)

// Import all images from assets folder
const images: Record<string, ImageMetadata> = Object.fromEntries(
    await Promise.all(
        Object.entries(import.meta.glob('@/assets/macchinisti/*')).map(async ([path, module]) => [
            path.split('/').pop()!.split('.')[0],
            // @ts-ignore
            (await module()).default,
        ])
    )
)

console.log(macchinisti)
console.log(images)

const currentMacchinisti = macchinisti.filter(macchinista => !macchinista.exitDate)
const pastMacchinisti = macchinisti.filter(macchinista => macchinista.exitDate)

const getMacchinistaPicture = (fullName: string): ImageMetadata => {
    const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
    console.log(macchinistaId)

    return images[macchinistaId] ?? images['fallback']
}
---

<BaseLayout title="Macchinisti | PHC" pageTags={'macchinisti'}>
    <Header />
    <main>
        <div class="card large" style={{ '--card-base': '#e1766b' }}>
            <div class="title">Ecco i Macchinisti!</div>
            <div class="text">
                <p>Le persone che hanno reso questo possibile vi dicono ciao!</p>
            </div>
        </div>

        <div class="bubble-array">
            {
                currentMacchinisti.map(macchinista => (
                    <Bubble
                        image={getMacchinistaPicture(macchinista.fullName)}
                        fullName={macchinista.fullName}
                        entranceDate={macchinista.entranceDate}
                        description={macchinista.description}
                        social={macchinista.social}
                    />
                ))
            }
        </div>

        <div class="card large" style={{ '--card-base': '#6BD6E1' }}>
            <div class="title"><s>Deus</s> Ex Macchinisti</div>
            <div class="text">
                <p>Gli vogliamo molto bene, hanno fatto grandi cose!</p>
            </div>
        </div>

        <div class="bubble-array">
            {
                pastMacchinisti.map(macchinista => (
                    <Bubble
                        image={getMacchinistaPicture(macchinista.fullName)}
                        fullName={macchinista.fullName}
                        entranceDate={macchinista.entranceDate}
                        exitDate={macchinista.exitDate}
                        description={macchinista.description}
                        social={macchinista.social}
                    />
                ))
            }
        </div>
    </main>
    <Footer />
</BaseLayout>