Untitled

function factoryMedia(media, photographerName) {
    // Fonction pour créer un élément pour trier les médias
    function mediaTrie() {
        // Création de la div qui contiendra le selecteur de tri
        const div = document.createElement("div");
        // Ajout de la classe "classId" à la div
        div.setAttribute("class", "classId");
        // Création du label pour indiquer "Trier par"
        const label = document.createElement("label");
        label.textContent = "Trier par";
        // Ajout de la classe "labelStyle" au label
        label.setAttribute("class", "labelStyle");
        // Création de la liste déroulante pour sélectionner le critère de tri
        const selectElement = document.createElement("select");
        // Ajout de la classe "optionOfSelectbtn" à la liste déroulante
        selectElement.setAttribute("class", "optionOfSelectbtn");
        // Ajout d'un écouteur d'événement pour la sélection d'une option dans la liste déroulante
        selectElement.addEventListener("change", function(e) {
            // Récupération de la valeur sélectionnée dans la liste déroulante
            const sortBy = e.target.value;
            // Tri des médias en fonction de la valeur sélectionnée
            switch (sortBy) {
              case "date":
                // Tri par date décroissante
                media.sort((a, b) => new Date(b.date) - new Date(a.date));
                break;
              case "populaire":
                // Tri par nombre de likes décroissant
                media.sort((a, b) => b.likes - a.likes);
                break;
              case "titre":
                // Tri par ordre alphabétique du titre
                media.sort((a, b) => a.title.localeCompare(b.title));
                break;
            }
            // Mise à jour du contenu de la section des médias
            document.querySelector("#mediaPhoto").innerHTML = photographerMedia().innerHTML;
        });
        // Options disponibles pour le tri
        const options = [
            { value: "populaire", text: "Popularité" },
            { value: "date", text: "Date" },
            { value: "titre", text: "Titre" }
        ];
        // Boucle pour ajouter chaque option à la liste déroulante
        options.forEach((option, i) => {
            const optionElement = document.createElement("option");
            optionElement.setAttribute("value", option.value);
            optionElement.textContent = option.text;
            selectElement.appendChild(optionElement);
        });
        
        // Ajout du label et de la liste déroulante à la div
        div.appendChild(label);
        div.appendChild(selectElement);
        // Renvoi de la div
        return div;
    }

      
    function photographerMedia(){
        const div = document.createElement('div')
        div.setAttribute('id', 'mediaPhoto')
        div.setAttribute('class', 'mediaPhoto')
        let images = media.map(c => c.image)
        let videox = media.map(c => c.video)
        media.forEach(function( result, i ) { 
        if (result.video === undefined) {
            
            const anchor = document.createElement('section');
            const encore = document.createElement('div');

            anchor.setAttribute('class', 'testo');
            encore.setAttribute('class', 'displayFlex');

            const imageMedia = document.createElement('img');
            imageMedia.setAttribute('id', 'lightbox-trigger');
            imageMedia.setAttribute('class', 'mediaImgSettings');
            imageMedia.src = `assets/photo/${photographerName.split(' ')[0].replace('-', ' ')}/${result.image}`;


            const test = document.createElement('p');
            test.textContent = result.title;
            test.setAttribute('class', 'pForHearth');

            const testLike = document.createElement('p');
            testLike.textContent = result.likes;
            testLike.setAttribute('id', result.id);

            const coucou = document.createElement('i');
            coucou.setAttribute('class', 'fas fa-heart');

            const imgDiv = document.createElement('div');
            imgDiv.setAttribute('id', 'lightbox');

            const btnPrecedent = document.createElement('i');
            btnPrecedent.setAttribute('class', 'fa-solid fa-arrow-left');
            btnPrecedent.onclick = () => {
                let lightboxImage = document.getElementById("lightbox-image");
                lightboxImage.src = `assets/photo/${photographerName.split(' ')[0].replace('-', ' ')}/${images[i--]}`;
            };

            const btnSuivant = document.createElement('i');
            btnSuivant.setAttribute('class', 'fa-solid fa-arrow-right');
            btnSuivant.onclick = () => {
                let lightboxImage = document.getElementById("lightbox-image");
                
                lightboxImage.src = `assets/photo/${photographerName.split(' ')[0].replace('-', ' ')}/${images[i++]}`;
            };

            const divTestForClose = document.createElement('div');
            const nameOfLightbox = document.createElement('p');
            nameOfLightbox.textContent = result.title;
            nameOfLightbox.setAttribute('id', 'titleOfMedia')

            const divName = document.createElement('div');
            divName.setAttribute('id', 'btnClose')
            const btnFermer = document.createElement('i');
            btnFermer.setAttribute('class', 'fa fa-times');
            btnFermer.setAttribute('id', 'btnFermer')

            const btnFermerLightbox = document.createElement('span');
            btnFermerLightbox.setAttribute('class', 'styleBtnLightbox');
            btnFermer.onclick = () => closeLightbox();

            function closeLightbox() {
                var lightbox = document.getElementById("lightbox");
                lightbox.style.display = "none";
                var footerDiv = document.getElementById('footer')
                footerDiv.style.display = "block";
            }

            const imageLightbox = document.createElement('img');
            imageLightbox.src = `assets/photo/${photographerName.split(' ')[0].replace('-', ' ')}/${result.image}`;
            imageLightbox.setAttribute('id', 'lightbox-image');

            


            

            const openLightbox = () => {
            const lightbox = document.getElementById("lightbox");
            const lightboxImage = document.getElementById("lightbox-image");
            const footerDiv = document.getElementById('footer');
            footerDiv.style.display = "none";
            lightboxImage.src = `assets/photo/${photographerName.split(' ')[0].replace('-', ' ')}/${result.image}`;
            lightbox.style.display = "block";
            };

            const ahrefMedia = document.createElement('button');
            ahrefMedia.setAttribute('class', 'styleOfButton');
            ahrefMedia.onclick = openLightbox;



            const divLikeAndHearth = document.createElement('button');
            divLikeAndHearth.setAttribute('class', 'displayDivLikeHearth');

            const totalLikes = media.reduce((acc, item) => acc + item.likes, 0);
            console.log(totalLikes);

            divLikeAndHearth.addEventListener('click', function () {
            let likeCounter = result.likes;
            let liked = false;
            if (!liked) {
                likeCounter++;
                liked = true;
                document.getElementById(`${result.id}`).innerHTML = likeCounter;
            

                } else {}
            })

            div.appendChild(anchor)
            ahrefMedia.appendChild(imageMedia);
            imgDiv.appendChild(btnFermerLightbox)
            btnFermerLightbox.appendChild(btnPrecedent)
            btnFermerLightbox.appendChild(btnSuivant)
            imgDiv.appendChild(divTestForClose)
            imgDiv.appendChild(divName)
            divTestForClose.appendChild(imageLightbox)
            divTestForClose.appendChild(nameOfLightbox)
            divName.appendChild(btnFermer)
            encore.appendChild(test);
            encore.appendChild(testLike);
            encore.appendChild(coucou) 
            encore.appendChild(divLikeAndHearth)
            divLikeAndHearth.appendChild(testLike)
            divLikeAndHearth.appendChild(coucou)
            anchor.appendChild(ahrefMedia)
            anchor.appendChild(imgDiv)
            anchor.appendChild(encore)
        } 
    else {
    const createElement = (type, attributes = {}, events = {}) => {
        const el = document.createElement(type);
        Object.entries(attributes).forEach(([key, value]) => {
            el.setAttribute(key, value);
        });
        Object.entries(events).forEach(([event, handler]) => {
            el.addEventListener(event, handler);
        });
        return el;
    };
              
    const anchor = createElement("section", { class: "testo" });
    const encore = createElement("div", { class: "displayFlex" });
              
    const btnPrecedent = createElement("i", { class: "fa-solid fa-arrow-left" }, {
        click: () => {
            let lightboxImage = document.getElementById("lightbox-image");
            lightboxImage.src = `assets/photo/${photographerName.split(" ")[0].replace("-", " ")}/${videox[i--]}`;
        }
    });
              
    const btnSuivant = createElement("i", { class: "fa-solid fa-arrow-right" }, {
        click: () => {
            let lightboxImage = document.getElementById("lightbox-image");
            lightboxImage.src = `assets/photo/${photographerName.split(" ")[0].replace("-", " ")}/${videox[i++]}`;
        }
    });
    const divTestForClose = document.createElement('div');
            

    const divName = document.createElement('div');
    divName.setAttribute('id', 'btnClose')
    const btnFermer = document.createElement('i');
    btnFermer.setAttribute('class', 'fa fa-times');
    btnFermer.setAttribute('id', 'btnFermer')
    const btnFermerLightbox = createElement("span", { class: "styleBtnLightbox" });
    const closeLightbox = () => {
        let lightbox = document.getElementById("lightboxx");
        lightbox.style.display = "none";
        imageLightbox.pause();
        let footerDiv = document.getElementById("footer");
        footerDiv.style.display = "block";
    };      
    btnFermer.addEventListener("click", closeLightbox);
              
    const nameOfLightbox = createElement("p", {}, {});
    nameOfLightbox.innerHTML = result.title;
    nameOfLightbox.textContent = result.title;
    nameOfLightbox.setAttribute('id', 'titleOfMedia')
              
    const imgDiv = createElement("div", { id: "lightboxx" });
              
    const imageLightbox = createElement("video", {
        src: `assets/photo/${photographerName.split(" ")[0].replace("-", " ")}/${result.video}`,
        id: "lightbox-video"
    });
              
              
              
    const ahrefMedia = document.createElement('button');
    ahrefMedia.setAttribute('class', 'styleOfButton');
    ahrefMedia.addEventListener('click', openLightbox);
              
    function openLightbox() {
        const lightbox = document.getElementById("lightboxx");
        const lightboxImage = document.getElementById("lightbox-video");
        lightboxImage.src = `assets/photo/${photographerName.split(' ')[0].replace('-', ' ')}/${result.video}`;
        imageLightbox.play();
        lightbox.style.display = "block";
        const footerDiv = document.getElementById('footer');
        footerDiv.style.display = "none";
    }
              
    encore.setAttribute('class','displayFlex');
    const video = document.createElement('video');
    video.src = `assets/photo/${photographerName.split(' ')[0].replace('-', ' ')}/${result.video}`;
    video.setAttribute('class', 'videoSettings');
              
    const test = document.createElement('p');
    test.textContent = `${result.title}`;
    test.setAttribute('class', 'pForHearth');
              
    const testLike = document.createElement('p');
    testLike.textContent = `${result.likes}`;
    testLike.setAttribute('id', `${result.id}`);
              
    const coucou = document.createElement('i');
    coucou.setAttribute('class', 'fas fa-heart');
              
    const divLikeAndHearth = document.createElement('button');
    divLikeAndHearth.setAttribute('class', 'displayDivLikeHearth');
    divLikeAndHearth.addEventListener('click', function() {
        let likeCounter = result.likes;  
        let liked = false;
        if (!liked) {
            likeCounter++;
            liked = true;
            document.getElementById(`${result.id}`).innerHTML = likeCounter;    
            } 
        });
              
    let totalLikes = media.reduce((total, item) => total + item.likes, 0);
    const cTest = document.querySelector('#total');
    cTest.textContent = totalLikes;
              


    div.appendChild(anchor)
    ahrefMedia.appendChild(video);
    imgDiv.appendChild(btnFermerLightbox)
    btnFermerLightbox.appendChild(btnPrecedent)
    btnFermerLightbox.appendChild(btnSuivant)
    btnFermerLightbox.appendChild(nameOfLightbox)
    imgDiv.appendChild(imageLightbox)
    imgDiv.appendChild(divName)

    imgDiv.appendChild(divTestForClose)
    divTestForClose.appendChild(imageLightbox)
    divTestForClose.appendChild(nameOfLightbox)
    divName.appendChild(btnFermer)

    encore.appendChild(test);
    encore.appendChild(divLikeAndHearth)
    divLikeAndHearth.appendChild(testLike)
    divLikeAndHearth.appendChild(coucou)
    anchor.appendChild(ahrefMedia)
    anchor.appendChild(imgDiv)
    anchor.appendChild(encore);

    }
})
    return(div)
}
    
    

    return { mediaTrie, photographerMedia}
}


export {factoryPhoto}
export {factoryMedia}