const previous = document.getElementById("previous")
const next = document.getElementById("next")
const img = document.getElementById("img")
const imgs = [
    {src: "imgs/village.jpg",
    alt: "christmas village at night with snow and christmas tree"},
    {src: "imgs/present.jpg",
    alt: "white and gold wrapped present on white table with snowflake decorations"},
    {src: "imgs/doggies.jpg",
    alt: "small black dog and small beige dog looking out the window at snow next to Christmas wreath"},
 
     {src: "imgs/village.jpg",
    alt: "christmas village at night with snow and christmas tree"},
    {src: "imgs/present.jpg",
    alt: "white and gold wrapped present on white table with snowflake decorations"},
    {src: "imgs/doggies.jpg",
    alt: "small black dog and small beige dog looking out the window at snow next to Christmas wreath"}   
    ]

// const currentImage = img.src = imgs[0].src;
// const currentAlt = img.alt = imgs[0].alt;
//     console.log(currentAlt)

let imgNum = 0
 
previous.classList.add("dis");
 
next.addEventListener("click", ()=> {

    if(imgNum >= 0 && imgNum <= imgs.length -2){
    // if(imgNum >= 0 && imgNum <= 4){
            // console.log(`imgNum: ${imgNum} ${imgs.length}`);
        imgNum++;
        img.src = imgs[imgNum].src;
        img.alt = imgs[imgNum].alt;
            console.log(`imgNum: ${imgNum}`);
            
        if(imgNum == 0) {
            previous.classList.add("dis");
            previous.disabled = true;        
        } else {
            previous.classList.remove("dis");
            previous.disabled = false;  
        } 
        if(imgNum == imgs.length -1) {
            next.classList.add("dis");
            next.disabled = true;        
        } else {
            next.classList.remove("dis");
            next.disabled = false;  
        }                    
    }
})  

previous.addEventListener("click", ()=>{

    // if(imgNum > 0 & imgNum <=5){
    if(imgNum > 0 & imgNum <= imgs.length -1){    
            console.log(`imgNum: ${imgNum} ${imgs.length}`);
        imgNum--;
        img.src = imgs[imgNum].src;
        img.alt = imgs[imgNum].alt;
            console.log(`imgNum: ${imgNum} ${imgs.length}`);   
        if(imgNum == 0) {
        previous.classList.add("dis");
        previous.disabled = true;        
        } else {
        previous.classList.remove("dis");
        previous.disabled = false;  
        } 
        if(imgNum == imgs.length -1) {
            next.classList.add("dis");
            next.disabled = true;   
        } else {
            next.classList.remove("dis");
            next.disabled = false;  
        }                 
    }    
})  
  
// Task:
// - Wire up the buttons to switch through the images in the imgs array. 
// - Make sure that the gallery works no matter how many images are added.
// - Decide/implement what to do when you reach either end of the array - do nothing and disable buttons, loop back round to the other end, or something else?
// - Remember to also update the alt tags.

// Stretch goals:
// - Add transitions for a smooth effect.
// - Allow the user to zoom in and out of the images.