import { parseClassList } from './utils'

const setActiveDiscoverTab = (clickedTab: Element): void => {
  const group = clickedTab.closest('[data-tab-group="discover"]')
  if (!group) {
    return
  }

  const triggers = group.querySelectorAll('[data-tab-trigger]')
  triggers.forEach((tab) => {
    const activeClasses = parseClassList(tab.getAttribute('data-tab-active-classes'))
    const inactiveClasses = parseClassList(tab.getAttribute('data-tab-inactive-classes'))
    tab.classList.remove(...activeClasses)
    tab.classList.add(...inactiveClasses)
  })

  const activeClasses = parseClassList(clickedTab.getAttribute('data-tab-active-classes'))
  const inactiveClasses = parseClassList(clickedTab.getAttribute('data-tab-inactive-classes'))
  clickedTab.classList.remove(...inactiveClasses)
  clickedTab.classList.add(...activeClasses)
}

const onDiscoverTabClick = (event: MouseEvent): void => {
  const target = event.target
  if (!(target instanceof Element)) {
    return
  }

  const trigger = target.closest('[data-tab-trigger]')
  if (!trigger) {
    return
  }

  setActiveDiscoverTab(trigger)
}

const initDiscoverTabs = (): void => {
  document.addEventListener('click', onDiscoverTabClick)
}

initDiscoverTabs()