const domElements = {
    gallery: document.querySelector('.gallery'),
    previous: document.querySelector('.previous'),
    next: document.querySelector('.next'), 
    container: document.querySelector('.container')
        
}

const limit = document.querySelectorAll('.card').length-1
const offset = 220
let steps = 0

const handleArrowClick = (element) => {
    
    domElements.container.removeEventListener('click', handleClick)

    const currentTransformValue = Number(window.getComputedStyle(domElements.gallery).transform.match(/matrix.*\((.+)\)/)[1].split(', ')[4])
    
    if(element.classList.contains('next') && steps < limit) {
        domElements.gallery.style.transform = `translateX(${currentTransformValue-offset}px)`
        steps++
    }
    
    if(element.classList.contains('previous') && steps > 0) {
        domElements.gallery.style.transform = `translateX(${currentTransformValue+offset}px)`
        steps--
    }
    
    if (steps !== 0) domElements.previous.classList.remove('disabled')
    if (steps === limit) domElements.next.classList.add('disabled')
    if (steps < limit) domElements.next.classList.remove('disabled')
    if (steps === 0) domElements.previous.classList.add('disabled')
    
    setTimeout(()=> domElements.container.addEventListener('click', handleClick), 500)
}

const handleClick = (e) =>{
    if (e.target.classList.contains('next') || e.target.classList.contains('previous')) handleArrowClick(e.target)
}

domElements.container.addEventListener('click', handleClick)