---
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 = Object.fromEntries(
    Object.entries(
        import.meta.glob<{ default: ImageMetadata }>('@/assets/macchinisti/*', {
            eager: true,
        })
    ).map(([path, module]) => [path.split('/').pop()!.split('.')[0], module])
)

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

const getMacchinistaPicture = (fullName: string) => {
    const macchinistaId = fullName.toLowerCase().replace(/\s+/g, '-')
    const { default: image } = images[macchinistaId] ?? images['fallback']
    return image
}
---

<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>
                    <em>> Chi sono i macchinisti?</em>
                    <br />
                    Questo è l'appellativo dato agli studenti che si occupano di gestire l'infrastuttura e i servizi
                    del PHC (vedi la homepage per informazioni su come diventare un macchinista). Qua sotto trovi
                    i macchinisti attualmente attivi in PHC.
                </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>
                    Qui raccogliamo qualche informazione sui macchinisti del passato, che hanno contribuito a
                    rendere il PHC quello che è oggi.
                </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>