import { database, alleenIngelogd } from "./index.js";

alleenIngelogd();

// Berichten versturen
/** @type {HTMLFormElement} */
const formulier = document.getElementById('verstuurform');

formulier.addEventListener('submit', async (event) => {
    event.preventDefault();
    const gegevens = new FormData(formulier);
    await verstuurBericht(gegevens.get('bericht'))
    formulier.reset();
});

async function verstuurBericht(bericht) {
    await database.collection('berichten').create({
        afzender: database.authStore.record.id,
        bericht
    });
}

// Laad 20 nieuwste berichten in, soorteer bij verstuurd (hoog naar laag)
const berichten = await database.collection('berichten').getList(1, 20, {
    sort: '-verstuurd',
    expand: 'afzender'
});

const berichtenlijst = document.getElementById('berichten');

let berichtenHtml = [];

berichten.items.forEach(bericht => {
    berichtenHtml.push(`<article>
        <h3>${bericht.expand.afzender.naam}</h3>
        <p>${bericht.verstuurd}</p>
        <h5>${bericht.bericht}</h5>
        </article>`);
});

berichtenlijst.innerHTML = berichtenHtml.join('\n');

// Schrijf in op nieuwe berichten (Create) en werk dan de berichtenlijst bij
database.collection('berichten').subscribe('*', function(event) {
    if(event.action !== 'create') {
        return;
    }

    const bericht = event.record;
    berichtenlijst.innerHTML = `<article>
        <h3>${bericht.expand.afzender.naam}</h3>
        <p>${bericht.verstuurd}</p>
        <h5>${bericht.bericht}</h5>
        </article>` + '\n' + berichtenlijst.innerHTML;
}, {
    expand: 'afzender'
});