import { useEventListener } from '@vueuse/core'
import { onContentUpdated } from 'valaxy'

export function useCodeGroups() {
  if (import.meta.env.DEV) {
    onContentUpdated(() => {
      document.querySelectorAll('.vp-code-group > .blocks').forEach((el) => {
        [...el.children].forEach((child) => {
          child.classList.remove('active')
        })
        el.children[0].classList.add('active')
      })
    })
  }

  useEventListener('click', (e) => {
    const el = e.target as HTMLInputElement
    if (el.matches('.vp-code-group input')) {
      // input <- .tabs <- .vp-code-group
      const group = el.parentElement?.parentElement
      if (!group)
        return

      const i = [...group.querySelectorAll('input')].indexOf(el)
      if (i < 0)
        return

      const blocks = group.querySelector('.blocks')
      if (!blocks)
        return

      const current = [...blocks.children].find(child =>
        child.classList.contains('active'),
      )
      if (!current)
        return

      const next = blocks.children[i]
      if (!next || current === next)
        return

      current.classList.remove('active')
      next.classList.add('active')

      const label = group?.querySelector(`label[for="${el.id}"]`)
      label?.scrollIntoView({ block: 'nearest' })
    }
  })
}