import { computed, ref, watchEffect } from 'vue'

export type Theme = 'dark' | 'light'

const STORAGE_KEY = 'loom-theme'

function initialTheme(): Theme {
  return localStorage.getItem(STORAGE_KEY) === 'light' ? 'light' : 'dark'
}

const theme = ref<Theme>(initialTheme())
const nextTheme = computed<Theme>(() => (theme.value === 'dark' ? 'light' : 'dark'))

watchEffect(
  () => {
    document.documentElement.dataset.theme = theme.value
  },
  { flush: 'sync' },
)

export function useTheme() {
  const toggle = () => {
    theme.value = nextTheme.value
    localStorage.setItem(STORAGE_KEY, theme.value)
  }
  return { theme, nextTheme, toggle }
}