---
import '@/styles/pages/macchinisti.css'

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">
    <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
                        fullName={macchinista.fullName}
                        description={macchinista.description}
                        image={getMacchinistaPicture(macchinista.fullName)}
                        entranceDate={macchinista.entranceDate}
                        exitDate={macchinista.exitDate}
                        founder={macchinista.founder}
                        social={macchinista.social}
                    />
                ))
            }
        </div>
    </main>
    <Footer />
</BaseLayout>
