export function processClickableElements() {
    return { 
        etapeListLinks: processEtapeLinks(),
        generalListLinks: processStaticLinks(),
        logoLink: processLogoLink(),
        mapIcons: processMapIcons(),
    };
}

function processEtapeLinks() {
    const etape_li = document.querySelectorAll('#etapes-liste li');
    etape_li.forEach((li) => {
        const etape_link = li.querySelector('a.etape-link');
        etape_link.addEventListener('click', (e) => e.preventDefault());
        const couleur = etape_link.dataset.couleur;
        li.dataset.href = etape_link.attributes.href.value;
        const iconElements = li.querySelectorAll('.icone-arret > div');
        for (let element of iconElements) {
          element.style.backgroundColor = couleur;
        }
    });

    return etape_li;
}

function processStaticLinks() {
    const general_link_fields = document.querySelectorAll('#menu > ul > li > a');
    for (let i = 0; i <  general_link_fields.length; i ++) {
        let general_link_path = general_link_fields[i].getAttribute('data-drupal-link-system-path');
        if (general_link_path && general_link_path !== '<front>') {           
            const match = [...general_link_path.match(/^node\/(\d+)$/)];
            if (match) {
                const nid = match[1];
                general_link_fields[i].setAttribute('data-nid', parseInt(nid));
            }
        }
        general_link_fields[i].addEventListener('click', (e) => e.preventDefault());
    }

    return general_link_fields;
}

function processLogoLink() {
    const logo = document.querySelector('#block-caravane-logocaravane a');
    logo.addEventListener('click', (e) => e.preventDefault());

    return logo;
}

function processMapIcons() {
    const icons = document.querySelectorAll('.leaflet-map-divicon');
    for (let icon of icons) {
        icon.setAttribute('title', '');

        const hrefContainer = icon.querySelector('.url');
        icon.dataset.href = hrefContainer.innerText;
        hrefContainer.style.display = "none";

        const colorContainer = icon.querySelector('.couleur');
        let color = colorContainer.innerText;
        colorContainer.style.display = "none";

        const iconElements = icon.querySelectorAll('div');
        for (let iconElement of iconElements) {
          iconElement.style.backgroundColor = color;
        }

        icon.addEventListener('mouseenter', () => {
            icon.style.transform = `${icon.style.transform} scale(1.1)`;
            const popup = document.querySelector('.leaflet-tooltip-center > div');
            popup.style.opacity = "1";
        });
  
        icon.addEventListener('mouseleave', () => {
            icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
        });  
    }

    return icons;
}