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

// 本地存储主题的键名
const THEME_STORAGE_KEY = 'fpga-weblab-theme'

export const useThemeStore = defineStore('theme', () => {
  const allTheme = ["winter", "night"]
  const darkTheme = "night";
  const lightTheme = "winter";
  
  // 尝试从本地存储中获取保存的主题
  const getSavedTheme = (): string | null => {
    return localStorage.getItem(THEME_STORAGE_KEY)
  }
  
  // 检测系统主题偏好
  const getPreferredTheme = (): string => {
    const savedTheme = getSavedTheme()
    // 如果有保存的主题设置，优先使用
    if (savedTheme && allTheme.includes(savedTheme)) {
      return savedTheme
    }
    // 否则检测系统主题模式
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 
      ? darkTheme : lightTheme
  }
  
  // 初始化主题为首选主题
  const currentTheme = ref(getPreferredTheme())

  // 保存主题到本地存储
  const saveTheme = (theme: string) => {
    localStorage.setItem(THEME_STORAGE_KEY, theme)
  }

  // 当主题变化时，保存到本地存储
  watch(currentTheme, (newTheme) => {
    saveTheme(newTheme)
  })

  // 添加系统主题变化的监听
  const setupThemeListener = () => {
    if (window.matchMedia) {
      const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)')
      const handler = (e: MediaQueryListEvent) => {
        // 只有当用户没有手动设置过主题时，才跟随系统变化
        if (!getSavedTheme()) {
          currentTheme.value = e.matches ? darkTheme : lightTheme
        }
      }
      
      // 添加主题变化监听器
      colorSchemeQuery.addEventListener('change', handler)
    }
  }
  function setTheme(theme: string) {
    const isContained: boolean = allTheme.includes(theme)
    if (isContained) {
      currentTheme.value = theme
      saveTheme(theme) // 保存主题到本地存储
    }
    else {
      console.error(`Not have such theme: ${theme}`)
    }
  }

  function toggleTheme() {
    if (currentTheme.value == darkTheme) {
      currentTheme.value = lightTheme;
    } else if (currentTheme.value == lightTheme) {
      currentTheme.value = darkTheme;
    } else {
      currentTheme.value = lightTheme;
    }
    // 主题切换时自动保存（通过 watch 函数实现）
  }

  function isDarkTheme(): boolean {
    return currentTheme.value == darkTheme
  }

  function isLightTheme(): boolean {
    return currentTheme.value == lightTheme
  }

  // 初始化时设置系统主题变化监听器
  if (typeof window !== 'undefined') {
    setupThemeListener()
  }

  return {
    allTheme,
    currentTheme,
    setTheme,
    toggleTheme,
    isDarkTheme,
    isLightTheme,
    setupThemeListener
  }
})