// ====================================================
// =  Déclaration des variables globales              =
// ====================================================
const sectionPuzzles = document.querySelector("#liste-puzzles");
const btnAddProduit = document.querySelector("#ajouter-produit");
const listeProduits = [
    {
        nom: "Wasgij Christmas #20 - Les esprits de Noël !",
        pieces: 1000,
        fabricant: "Educa",
        prix: "34.50",
        imageAleatoire: false,
        image: "https://picsum.photos/id/559/800/600", 
        nouveau: false
    },
    {
        nom: "Station de train et bonhommes de neige",
        pieces: 500,
        fabricant: "Clementoni",
        prix: "24.50",
        imageAleatoire: false,
        image:"./assets/images/default_puzzle.jpg", 
        nouveau: false
    },
    {
        nom: "Coucher de soleil à Venise",
        pieces: 1500,
        fabricant: "Belvédère",
        prix: "40",
        imageAleatoire: false,
        image: "https://picsum.photos/id/65/800/600", 
        nouveau: false
    },
    {
        nom: "Magasin de jouets antique",
        pieces: 500,
        fabricant: "Clementoni",
        prix: "24.50",
        imageAleatoire: true,
        image: "https://picsum.photos/id/65/800/600", 
        nouveau: false
    },
    {
        nom: "Jan Van Haasteren - Célébration de la fierté",
        pieces: 1000,
        fabricant: "Ravensburger",
        prix: "24.50",
        imageAleatoire: true,
        nouveau: false
    }, 
    {
        nom: "Wasgij Christmas #20 - Les esprits de Noël !",
        pieces: 1000,
        fabricant: "Educa",
        prix: "34.50",
        imageAleatoire: true,
        nouveau: false
    },
    {
        nom: "Station de train et bonhommes de neige",
        pieces: 500,
        fabricant: "Clementoni",
        prix: "24.50",
        imageAleatoire: true,
        nouveau: false
    },
    {
        nom: "Magasin de jouets antique",
        pieces: 500,
        fabricant: "Clementoni",
        prix: "24.50",
        imageAleatoire: true,
        nouveau: false
    },
    {
        nom: "Jan Van Haasteren - Célébration de la fierté",
        pieces: 1000,
        fabricant: "Ravensburger",
        prix: "24.50",
        imageAleatoire: true,
        nouveau: false
    },
    {
        nom: "Coucher de soleil à Venise",
        pieces: 1500,
        fabricant: "Belvédère",
        prix: "40",
        imageAleatoire: true,
        nouveau: false
    }
];


// ====================================================
// =  Déclaration des événements                      =
// ====================================================
btnAddProduit.addEventListener("click", () => {
    const nom = document.querySelector("#puzzle-nom").value;
    const pieces = document.querySelector("#puzzle-pieces").value;
    const fabricant = document.querySelector("#puzzle-fabricant").value;
    const prix = document.querySelector("#puzzle-prix").value;
    const imageAleatoire = document.querySelector("#puzzle-image").checked;

    AjoutProduit(nom, prix, pieces, fabricant, imageAleatoire, "./assets/images/default_puzzle.jpg", true);
})


// ====================================================
// =  Code qui sera exécuté au chargement de la page  =
// ====================================================
console.log("Le script est chargé");
initialisation();


// ====================================================
// =  Déclaration des fonctions                       =
// ====================================================


function AjoutProduit(nom, prix, pieces, fabricant, imageAleatoire, image, nouveau = false) {
    const card = document.createElement("div");
    const indexProduit = document.querySelectorAll(".card-produit").length + 1;
    const imageUrl = imageAleatoire ? "https://picsum.photos/800/600?random=" + indexProduit : image ;
    
    card.classList.add("card-produit");
    if (nouveau) {
        card.classList.add("nouveau");
    }
    card.innerHTML = `
        <img src="${imageUrl}" alt="produit_${indexProduit}">
        <span class="fabricant">${fabricant}</span>
        <span class="prix">${prix}$</span>
        <span class="nom">${nom} | ${pieces} mcx</span>
        <a href="produit.html">Plus d'informations</a>
    `;
    sectionPuzzles.appendChild(card);
}

function initialisation() {
    listeProduits.forEach(produit => {
        AjoutProduit(produit.nom, produit.prix, produit.pieces, produit.fabricant, produit.imageAleatoire, produit.image, produit.nouveau);
    })
}