import { RefObject } from 'preact'
import { StateUpdater } from 'preact/hooks'
import { JSXInternal } from 'preact/src/jsx'

export const quickSettingsKeyDownHandler = (
  closeQuickSettingsMenu: () => void,
  event: JSXInternal.TargetedKeyboardEvent<HTMLDivElement>,
  quickSettingsMenuRef: RefObject<HTMLDivElement>,
  themesMenuOpen: boolean,
) => {
  if (quickSettingsMenuRef?.current) {
    const items: NodeListOf<HTMLButtonElement> =
      quickSettingsMenuRef.current.querySelectorAll(':scope > button')
    const currentFocusedIndex = Array.from(items).findIndex((btn) => btn === document.activeElement)

    if (!themesMenuOpen) {
      switch (event.key) {
        case 'Escape':
          closeQuickSettingsMenu()
          break
        case 'ArrowDown':
          if (items[currentFocusedIndex + 1]) {
            items[currentFocusedIndex + 1].focus()
          } else {
            items[0].focus()
          }
          break
        case 'ArrowUp':
          if (items[currentFocusedIndex - 1]) {
            items[currentFocusedIndex - 1].focus()
          } else {
            items[items.length - 1].focus()
          }
          break
      }
    }
  }
}

export const themesMenuKeyDownHandler = (
  event: React.KeyboardEvent<HTMLDivElement>,
  themesMenuRef: RefObject<HTMLDivElement>,
  setThemesMenuOpen: StateUpdater<boolean>,
  themesButtonRef: RefObject<HTMLButtonElement>,
) => {
  if (themesMenuRef?.current) {
    const themes = themesMenuRef.current.querySelectorAll('button')
    const currentFocusedIndex = Array.from(themes).findIndex(
      (themeBtn) => themeBtn === document.activeElement,
    )

    switch (event.key) {
      case 'Escape':
      case 'ArrowLeft':
        event.stopPropagation()
        setThemesMenuOpen(false)
        themesButtonRef.current?.focus()
        break
      case 'ArrowDown':
        if (themes[currentFocusedIndex + 1]) {
          themes[currentFocusedIndex + 1].focus()
        } else {
          themes[0].focus()
        }
        break
      case 'ArrowUp':
        if (themes[currentFocusedIndex - 1]) {
          themes[currentFocusedIndex - 1].focus()
        } else {
          themes[themes.length - 1].focus()
        }
        break
    }
  }
}