const THEMES = [
  {
    id: 'orange',
    name: '活力橙',
    primary: '#FF6B35',
    primaryLight: '#FF8C5A',
    primaryBg: '#FFF3ED',
    primaryRgb: '255,107,53'
  },
  {
    id: 'blue',
    name: '深海蓝',
    primary: '#2979FF',
    primaryLight: '#5C9CFF',
    primaryBg: '#EDF4FF',
    primaryRgb: '41,121,255'
  },
  {
    id: 'green',
    name: '森林绿',
    primary: '#43A047',
    primaryLight: '#6EC072',
    primaryBg: '#EDF7EE',
    primaryRgb: '67,160,71'
  },
  {
    id: 'purple',
    name: '优雅紫',
    primary: '#7E57C2',
    primaryLight: '#A08AD6',
    primaryBg: '#F5F0FA',
    primaryRgb: '126,87,194'
  },
  {
    id: 'pink',
    name: '樱花粉',
    primary: '#EC407A',
    primaryLight: '#F06A9A',
    primaryBg: '#FDEEF3',
    primaryRgb: '236,64,122'
  }
]

const DEFAULT_THEME_ID = 'orange'
const THEME_KEY = 'app_theme'
let _lastNavColor = ''
let _navColorTimer = null

const getThemeById = (id) => THEMES.find(t => t.id === id) || THEMES[0]

const getCurrentTheme = () => {
  const id = wx.getStorageSync(THEME_KEY) || DEFAULT_THEME_ID
  return getThemeById(id)
}

const _setNavBarColor = (primary) => {
  if (_lastNavColor === primary) return
  _lastNavColor = primary
  if (_navColorTimer) clearTimeout(_navColorTimer)
  _navColorTimer = setTimeout(() => {
    try {
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: primary
      })
    } catch (e) {}
  }, 50)
}

const setTheme = (id) => {
  wx.setStorageSync(THEME_KEY, id)
  const theme = getThemeById(id)
  _setNavBarColor(theme.primary)
  const app = getApp()
  if (app && app.globalData) app.globalData.theme = theme
  return theme
}

const applyThemeToPage = (self) => {
  const theme = getCurrentTheme()
  self.setData({
    theme,
    themeStyle: `--primary:${theme.primary};--primary-light:${theme.primaryLight};--primary-bg:${theme.primaryBg};--primary-rgb:${theme.primaryRgb};`
  })
  _setNavBarColor(theme.primary)
}

const getThemeStyle = (theme) => {
  const t = theme || getCurrentTheme()
  return `--primary:${t.primary};--primary-light:${t.primaryLight};--primary-bg:${t.primaryBg};--primary-rgb:${t.primaryRgb};`
}

module.exports = {
  THEMES,
  DEFAULT_THEME_ID,
  getThemeById,
  getCurrentTheme,
  setTheme,
  applyThemeToPage,
  getThemeStyle
}