import { computed } from 'vue'
import { useTheme } from 'vuetify'
import { getNextThemeName } from '@/utils/theme'

export function useThemeToggle() {
  const theme = useTheme()

  const availableThemeNames = computed(() =>
    Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
  )

  function toggleTheme() {
    const names = availableThemeNames.value
    if (names.length === 0) return null

    const current = theme.global.name.value
    const next = getNextThemeName(names, current)
    if (!next) return null

    theme.change(next)
    return next
  }

  return {
    availableThemeNames,
    toggleTheme,
  }
}