const filterSwitch = document.querySelector('.filter__switch')

// event delegator for .filter__items
document.querySelector('.filter').addEventListener('click', e => {
  e.stopPropagation()

  const el = e.target

	// if clicked element is an inactive .filter__item
  if (el.classList.contains('filter__item') && !el.classList.contains('filter__item--active')) {
    const filterItemData = el.getBoundingClientRect()
    const switchData = filterSwitch.getBoundingClientRect()
    const origin = document.querySelector('.filter__item').getBoundingClientRect().x + 5

		// calculate new x coordinate for switch
    const midPoint = filterItemData.x + (filterItemData.width / 2)
    const newSwitchX = midPoint - (switchData.width / 2)

		
		// Using the Web Animations API
    const keyframes = [
      { transform: `translateX(${switchData.x - origin}px)`},
      { transform: `translateX(${newSwitchX - origin}px)`}
    ]

    const options = {
      duration: 300,
      easing: 'cubic-bezier(0.42, 0, 0.58, 1)',
      fill: 'forwards'
    }

    filterSwitch.animate(keyframes, options)
		
		// update active .filter__item
    document.querySelector('.filter__item--active').classList.remove('filter__item--active')
    el.classList.add('filter__item--active')
  }
})