export const UpdateGridHandler = {
    init: function () {

        const loadMoreButton = document.querySelector('.js-show-more-updates');
        const updateGridItems = document.querySelector('.js-update-grid-items');

        if(!updateGridItems) {
            return;
        }

        const updateCategoryId = updateGridItems.dataset.activeUpdateCategory;

        let clicks = 0;

        loadMoreButton.addEventListener('click', async (e) => {
            e.preventDefault();
            clicks++;

            const endpoint = updateCategoryId
                ? `/api/updates/timeline/${clicks * 9}?category=${updateCategoryId}`
                : `/api/updates/timeline/${clicks * 9}`

            const response = await fetch(endpoint);
            const data = await response.json();

            if (!data.updatesLeft) loadMoreButton.style.display = 'none';

            data.updates.forEach(update => {
                let html = `<a class="c-update-card js-update-grid-card" href="${update.url}" data-category-id="${update.categoryId}">`;
                if (update.image) html += `<img class="c-update-card__image" src="${update.image}" alt="${update.name}" />`;
                html += `<div class="c-update-card__body">
                            <h3 class="c-card__title"> ${update.name}</h3>
                            <div class="c-update-card__date">
                                ${update.date.day}/${update.date.month}/${update.date.year}
                            </div>
                            <div class="c-update-card__description">
                                ${update.description}
                            </div>
                            <div class="c-card__action">
                                <p class="c-text-button  c-text-button--icon ">
                                    <span class="c-text-button__text">${data.readMoreTranslation}</span>
                                    <i class="c-text-button__icon">
                                        <svg width="21" height="13" viewBox="0 0 21 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M14.2759 12.2429L20.2461 6.27273L14.2759 0.302556L12.793 1.77273L16.2127 5.19247H0.136719V7.35298H16.2127L12.793 10.7599L14.2759 12.2429Z" fill="currentColor"></path>
                                        </svg>
                                    </i>
                                </p>
                            </div>
                        </div>
                    </a>`
                updateGridItems.insertAdjacentHTML('beforeend', html);
            })
        })
    }
}