/**
 * Esegue le chiamate Ajax
 * Example:
 * <a
 data-post='{"row":"3", "quante":"3", "all":"9", "lingua":"it", "id_categoria":"1"}'
 data-file="URL_SITO/assets/ajax/getBlogs.php"
 data-tpl="URL_SITO/assets/ajax/tpl/blog-listing.html"
 data-container="blog-listing"
 data-format-date="d/M/y"
 data-lang="it"
 data-url-images="componiURLRisorsa('copertine_blog/anteprime/m')"
 data-url="componiURL('', $lang)"
 data-text-loading="Caricamento"
 data-id-button-text="text-button-load-more"
 data-text-load="Carica altro"
 data-id-row="js-row-id-load-more"
 data-id-js-ajax="js-id-ajax"
 class="theme-btn btn-style-two js-ajax" id="js-id-ajax">
 <span class="btn-title text-white" id="text-button-load-more">
 Carica altro
 </span>
 </a>
 */
document.addEventListener("DOMContentLoaded", function() {
    const buttons = document.querySelectorAll('.js-ajax');

    buttons.forEach(button => {

        const textLoading = button.getAttribute('data-text-loading');

        const textLoad = button.getAttribute('data-text-load');

        const idButtonText = button.getAttribute('data-id-button-text');

        button.addEventListener('click', function(event) {
            event.preventDefault(); // Previene il comportamento predefinito del link

            // Ottiene i dati dal data-post e li converte in un oggetto JSON
            const dataPost = button.getAttribute('data-post');
            const postData = JSON.parse(dataPost.replace(/'/g, '"')); // Sostituisce i singoli apici con doppi apici

            const objPost = JSON.parse(dataPost);

            // Ottiene il nome del file dal data-file
            const dataFile = button.getAttribute('data-file');

            const lang = button.getAttribute('data-lang');

            const dataIdRow = button.getAttribute('data-id-row');

            const dataIdJsAjax = button.getAttribute('data-id-js-ajax');

            document.getElementById(idButtonText).textContent = textLoading;

            // Ottiene il percorso del template dal data-tpl
            const templateFile = button.getAttribute('data-tpl');

            const urlImages = button.getAttribute('data-url-images');

            const url = button.getAttribute('data-url');

            // Ottiene il contenitore dal data-container
            const containerClass = button.getAttribute('data-container');
            const container = document.querySelector(`.${containerClass}`);

            // Ottiene il formato della data dal data-format-date
            const dateFormat = button.getAttribute('data-format-date') || 'd/m/y';

            // Esegue la chiamata AJAX per ottenere i dati
            fetch(dataFile, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(postData)
            })
                .then(response => {
                if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
                console.log('Success:', data);

                // Esegue la chiamata AJAX per ottenere il template
                fetch(templateFile)
                .then(response => {
                    if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(template => {
                data.forEach(item => {
                    let output = template;
                    for (const key in item) {
                let value = item[key];
                if (key.toLowerCase().includes('data')) {
                    value = formatDate(value, dateFormat, lang);
                }
                if (key.toLowerCase().includes('seo_url') || key.toLowerCase().includes('url')) {
                    value = url + '/' + value;
                }
                if (key.toLowerCase().includes('immagine') || key.toLowerCase().includes('copertina')) {
                    if(value != null && value != '' && value != undefined) {
                        value = urlImages + '/' + value;
                    } else {
                        value = url + '/assets/img/default-bg-omcar.jpg';
                    }
                }
                const regex = new RegExp(`\\$\\{${key}\\}`, 'g');
                output = output.replace(regex, value);
            }

            document.getElementById(idButtonText).textContent = textLoad;

            const new_row = Number(objPost['row']) + Number(objPost['quante']);
            if(new_row >= objPost['all']){
                document.getElementById(dataIdRow).style.display = "none";
            } else {
                objPost['row'] = new_row;
                const newObjPost = JSON.stringify(objPost);

                const dataAttributeName = 'data-post'; // Replace with your actual data attribute name
                const dataAttributeValue = newObjPost; // Replace with your actual data attribute value

                const elAjax = document.getElementById(dataIdJsAjax);
                elAjax.setAttribute(dataAttributeName, dataAttributeValue);
            }

            // Aggiunge il contenuto elaborato direttamente al contenitore specificato
            container.insertAdjacentHTML('beforeend', output);
        });
        })
        .catch(error => {
                console.error('Error fetching template:', error);
            });
        })
        .catch(error => {
                console.error('Error:', error);
            });
        });
    });
});

function formatDate(dateString, format, lang) {
    const date = new Date(dateString);
    const day = ('0' + date.getDate()).slice(-2);
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const year = date.getFullYear();

    var monthTranslate = [];
    monthTranslate['it'] = ['Gennaio', 'Febbrario', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'];
    monthTranslate['en'] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    monthTranslate['es'] = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
    monthTranslate['fr'] = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'];

    switch (format) {
        case 'd/m/y':
            return `${day}/${month}/${year}`;
        case 'm/d/y':
            return `${month}/${day}/${year}`;
        case 'y/m/d':
            return `${year}/${month}/${day}`;
        case 'd/M/y':
            var monthLang = monthTranslate[lang][Number(month) - 1];
            return `${day} ` + monthLang +  ` ${year}`;
        // Aggiungi altri formati se necessario
        default:
            return dateString; // Restituisce la data originale se il formato non è riconosciuto
    }
}

/**
 * Aggiunge l'attributo error a tutte le immagini, mettendo l'immagine di default
 */
function replaceBrokenImages() {
    // URL dell'immagine di default
    var defaultImageUrl = 'assets/img/default-image.jpg'; // Sostituisci 'default-image.jpg' con il percorso dell'immagine di default

    // Selezioniamo tutte le immagini nel documento
    var images = document.getElementsByTagName('img');

    // Iteriamo su tutte le immagini
    for (var i = 0; i < images.length; i++) {
        // Aggiungiamo un gestore per l'evento "error" per ciascuna immagine
        images[i].addEventListener('error', function() {
            // Impostiamo l'attributo 'src' con l'URL dell'immagine di default
            this.src = defaultImageUrl;
        });
    }
}

// Chiamiamo la funzione quando il documento è completamente caricato
document.addEventListener('DOMContentLoaded', replaceBrokenImages);