import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

export const useThemeStore = defineStore('theme', () => {
  const vueuseColorScheme = ref(localStorage.getItem('vueuse-color-scheme'))
  const themeIcon = computed(() => {
    switch (true) {
      case vueuseColorScheme.value == 'light':
        return 'i-heroicons-sun'
      case vueuseColorScheme.value == 'dark':
        return 'i-heroicons-moon'
      case vueuseColorScheme.value == 'auto':
        return 'i-heroicons-computer-desktop'
    }
  })

  function setTheme() {
    switch (true) {
      case localStorage.getItem('vueuse-color-scheme') == 'dark':
        vueuseColorScheme.value = 'light'
        localStorage.setItem('vueuse-color-scheme', 'light')
        document.documentElement.classList.toggle('dark', false)
        break
      case localStorage.getItem('vueuse-color-scheme') == 'light':
        vueuseColorScheme.value = 'dark'
        localStorage.setItem('vueuse-color-scheme', 'dark')
        document.documentElement.classList.toggle('dark', true)
        break
      case localStorage.getItem('vueuse-color-scheme') == 'auto':
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          vueuseColorScheme.value = 'light'
          localStorage.setItem('vueuse-color-scheme', 'light')
          document.documentElement.classList.toggle('dark', false)
        } else {
          vueuseColorScheme.value = 'light'
          localStorage.setItem('vueuse-color-scheme', 'light')
          document.documentElement.classList.toggle('dark', false)
        }
        break
    }
  }
  return {
    vueuseColorScheme,
    setTheme,
    themeIcon,
  }
})