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

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');
        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 ++) {
      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;

        const colorContainer = icon.querySelector('.couleur');
        let color = colorContainer.innerText;
        icon.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;
}

function processMapContainer() {
    let mapContainer = document.querySelector('.leaflet-layer');
    mapContainer.style.height = "100vh";
    mapContainer.style.width = "100vw";
    mapContainer.dataset.href = "/";
    return mapContainer;
}