import { useQuasar } from 'quasar'

export const useThemeMode = () => {
  const $q = useQuasar()

  // deterministic on SSR: default = light
  const isDark = useState<boolean>('theme:isDark', () => false)

  const applyTheme = (value: boolean) => {
    if (!process.client) return
    document.documentElement.classList.toggle('dark', value)
    $q.dark.set(value)
    localStorage.setItem('theme', value ? 'dark' : 'light')
  }



  watch(isDark, (v) => applyTheme(v))

  const toggle = () => {
    isDark.value = !isDark.value
  }

  const set = (v: boolean) => {
    isDark.value = v
  }

  return { isDark, toggle, set }
}