const CALENDAR_PREFIX = "DofusEvent";
const DISCORD_BASE_INVITE = "https://discord.gg/nBuZ9vJ";


function createCard(evt, parent) {
    const cardElement = document.createElement('div');
    cardElement.classList.add('card');
    const gridElement = document.createElement('div');
    gridElement.classList.add('grid');
    /**
     * Data Part
     */
    const dataElement = document.createElement('div');
    dataElement.classList.add('column');
    const svgElement = document.createElement('img');
    svgElement.classList.add('icon');
    svgElement.src = './images/calendar.svg';
    const colElement = document.createElement('div');
    colElement.classList.add('column');
    const dateElement = document.createElement('div');
    dateElement.classList.add('flex');
    dateElement.appendChild(svgElement);
    const dateTextElement = document.createElement('div');
    dateTextElement.innerHTML = new Date(evt.scheduled_start_time).toLocaleDateString('fr-FR', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });

    dateElement.appendChild(dateTextElement);

    colElement.appendChild(dateElement);

    const titleElement = document.createElement('div');
    titleElement.classList.add('anime-name');
    titleElement.innerText = evt.name;
    colElement.appendChild(titleElement);


    dataElement.appendChild(colElement);



    /**
     * Bouton s'inscrire à la séance
     */
    const flexButtonElement = document.createElement('div');
    flexButtonElement.classList.add('flex');
    const linkElement = document.createElement('a');
    linkElement.classList.add('discordButton');
    linkElement.href = `${DISCORD_BASE_INVITE}?event=${evt.id}`;
    linkElement.target = "_blank";
    linkElement.innerText = "S'inscrire à la séance";

    flexButtonElement.appendChild(linkElement);
    dataElement.appendChild(flexButtonElement);

    gridElement.appendChild(dataElement);

    /**
     * Image Part
     */
    const imageParentElement = document.createElement('div');
    const imageElement = document.createElement('img');
    imageElement.src = `https://cdn.discordapp.com/guild-events/${evt.id}/${evt.image}.png?size=256`;
    imageElement.alt = evt.name;
    imageElement.classList.add('image');
    imageParentElement.appendChild(imageElement);
    gridElement.appendChild(imageParentElement);

    cardElement.appendChild(gridElement);
    parent.appendChild(cardElement);
}

document.addEventListener('readystatechange', async function() {
    if (document.readyState === "complete") {
        const events = await fetch('https://api.codetabs.com/v1/proxy/?quest=https://git.crystalyx.net/camelia-studio/Camelianimes-Datas/raw/branch/datas/events.json')
            .then(res => res.json())
            .catch((err) => {
                console.error(err);
                return [];
            });

        const cardParent = document.querySelector('.cards');

        // On sort les éléments par date
        events.sort((a, b) => new Date(a.scheduled_start_time) - new Date(b.scheduled_start_time));

        events.filter(event => event.description.includes(CALENDAR_PREFIX)).forEach(evt => {
            createCard(evt, cardParent);
        });
    }
});