const tabsBox = document.querySelector('.tabs-box'),
arrowIcons = document.querySelectorAll('.icon i'),
allTabs = document.querySelectorAll('.tab')



let isDargging = false

const handleIcons = () => {
  let scrollVal = Math.round(tabsBox.scrollLeft)
  let maxScrollableWidth = tabsBox.scrollWidth - tabsBox.clientWidth
  console.log(maxScrollableWidth,scrollVal)
  arrowIcons[0].parentElement.style.display = scrollVal > 0 ? 'flex' : 'none'
  arrowIcons[1].parentElement.style.display = maxScrollableWidth > scrollVal  ? 'flex' : 'none'
}

arrowIcons.forEach( icon => {
  icon.addEventListener('click', () => {
    // console.log(icon.id)
    tabsBox.scrollLeft += icon.id === 'left' ? -270 : 270
    setTimeout( () => handleIcons(), 50)
  })
})

allTabs.forEach( tab => {
  tab.addEventListener('click', () => {
    // console.log(icon.id)
    tabsBox.querySelector('.active').classList.remove('active')
    tab.classList.add('active')

  })
})
const dragging = (e) => {
  if (!isDargging) return
  tabsBox.classList.add('dragging')
  tabsBox.scrollLeft -= e.movementX
  handleIcons()
}

const dragStop = () =>{
  isDargging = false
  tabsBox.classList.remove('dragging')

}

tabsBox.addEventListener('mousedown', () => isDargging = true)
tabsBox.addEventListener('mousemove', dragging)
document.addEventListener('mouseup', dragStop)