// javascript
let counter = 0
let len = document.querySelectorAll(".card").length
let gallery = document.querySelector(".gallery")
let next = document.querySelector(".next")
let prev = document.querySelector(".previous")

const move_gallery = (c) => {
    if(c == len) {
        counter = c = 0
    }
    else if(c == -1) {
        counter = c = len - 1
    }
    gallery.style.transform = `translateX(${-(c * 220)}px)`
}

const button_control = () =>{
    if(counter > 0 || counter <len-2){
        if(next.style.opacity != 1){
            next.style.opacity = 1
        }
        if(prev.style.opacity != 1){
            prev.style.opacity = 1
        }
    }
    if(counter == len -1){
        next.style.opacity = "0.3"
    }
    if(counter == 0){
        prev.style.opacity = "0.3"
    }
}
prev.addEventListener("click", ()=>{
    // if(counter == 0) counter = len
    move_gallery(--counter)
    button_control()
    console.log(`perv, ${counter}`)
})

next.addEventListener("click", ()=>{
    // if(counter == len-1) counter = -1
    move_gallery(++counter)
    button_control()
    console.log(`next, ${counter}`)
})

// extra stuff
document.addEventListener('keyup', (event) => {
    if (event.key == 'ArrowLeft') {
        console.log("show previous")
        move_gallery(--counter)
        button_control()
    }else if (event.key == 'ArrowRight') {
        console.log("show next")
        move_gallery(++counter)
        button_control()
    }
});