const previous = document.getElementById("previous")
const next = document.getElementById("next")
const img = document.getElementsByTagName("img")
let imageIndex = 0

function moveToIndex(index) {
    let gallery = document.getElementById("gallery")
    let imgWidth = gallery.getElementsByTagName("img")[0].width
    let offset = window.getComputedStyle(gallery.getElementsByClassName("card")[0]).marginRight
    offset = parseInt(offset.replace("px", ""))
    let targetDisplacement = index * (-1 * (imgWidth + offset));
    let transform = `transform: translateX(${targetDisplacement}px)`
    document.getElementById('gallery').setAttribute('style', transform)
}

function imageCount() {
    return gallery.getElementsByTagName("img").length;
}

function resetButtonState() {
    previous.classList.remove("disabled")
    next.classList.remove("disabled")
}

previous.onclick = function previousBtn() {
    if (imageIndex == 0) {
        return
    }  

    imageIndex--
    moveToIndex(imageIndex)
    resetButtonState()
    if (imageIndex == 0) {
        previous.classList.add("disabled")
    }
}

next.onclick = function nextBtn() {
    if (imageIndex == imageCount() - 1) {
        return
    }

    imageIndex++
    moveToIndex(imageIndex)
    resetButtonState()
    if (imageIndex == imageCount() - 1) {
        next.classList.add("disabled")
    }
}