import { inject, ref, computed } from 'vue'
import { resolveTheme } from '../config/applyTheme'

export function useTheme() {
  const config = inject('appConfig')
  const theme = ref(resolveTheme(config))

  const isLightTheme = computed(() => theme.value === 'light')

  function applyTheme(name) {
    theme.value = name
    document.documentElement.className = name
    localStorage.setItem('theme', name)
  }

  function toggleTheme() {
    applyTheme(theme.value === 'dark' ? 'light' : 'dark')
  }

  return { theme, isLightTheme, toggleTheme }
}