import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
import { hooks } from '@opentiny/vue-common'
import { Notify } from '@opentiny/vue'

let isShowTip = false
function showTip() {
  Notify({
    type: 'info',
    title: '请注意',
    message: '主题切换成功，如有部分主题样式不生效，请尝试手动刷新页面即可',
    position: 'top-right',
    duration: 3000
  })
  isShowTip = true
}

export function useTheme({ readCacheImmediate = true } = {}) {
  const theme = new TinyThemeTool()
  const currThemeLabel = hooks.ref('tiny-default-theme')
  const lastThemeKey = localStorage.getItem('tinyThemeToolkey')

  const THEME_MAP = {
    'tiny-aurora-theme': null,
    'tiny-smb-theme': null,
    'tiny-infinity-theme': null
  }

  const changeTheme = ({ vm }) => {
    localStorage.setItem('tinyThemeToolkey', vm.label)
    theme.changeTheme(THEME_MAP[vm.label])
    currThemeLabel.value = vm.label
    // 若部分主题样式切换不生效，第一次则提示用户需要手动刷新
    if (!isShowTip) {
      showTip()
    }
  }

  // 切换上次缓存的主题
  if (readCacheImmediate && THEME_MAP[lastThemeKey]) {
    theme.changeTheme(THEME_MAP[lastThemeKey])
    currThemeLabel.value = lastThemeKey
  }

  return {
    changeTheme,
    currThemeLabel
  }
}