import { computed, ref } from 'vue'
import { defineStore } from 'pinia'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import { useI18n } from 'vue-i18n'
import { useLocalStorage } from '@vueuse/core'

/**
 * @description: 应用状态管理
 */
export const useAppStore = defineStore('app', () => {
  // 显示通用配置
  const showGeneralModal = ref(false)
  // 屏幕布局
  const screenLayout = ref<'vertical' | 'horizontal'>('vertical')
  // 语言
  const lang = useLocalStorage<'zh_CN' | 'en_US'>('lang', 'zh_CN')
  // 主题
  const theme = useLocalStorage('theme', 'dark')
  // 编辑器
  const editor = useLocalStorage('editor', {
    fontSize: 14
  })
  // 显示链接
  const showLink = ref(true)
  // 显示下载
  const showDownload = ref(true)
  // 加载中
  const loading = ref(false)
  // 联调工具路径
  const sunmicroPath = useLocalStorage('sunmicroPath', '')
  // 底部工具
  const showComposite = ref(false)
  // 底部工具当前tab
  const compositeTabAcitve = ref('log')
  // 拖拽中
  const draging = ref(false)

  const { locale } = useI18n()

  const getLocale = computed(() => (lang.value === 'zh_CN' ? zhCn : en))

  // 设置语言
  function setLang(val: 'zh_CN' | 'en_US') {
    lang.value = val
    locale.value = val
  }

  // 设置主题
  function setTheme(val: 'light' | 'dark') {
    theme.value = val
    // 切换html样式
    document.querySelector('html')?.setAttribute('class', val)
  }

  // 切换布局
  function toggleLayout() {
    screenLayout.value = screenLayout.value === 'vertical' ? 'horizontal' : 'vertical'
  }

  return {
    screenLayout,
    lang,
    theme,
    editor,
    showLink,
    showDownload,
    loading,
    getLocale,
    setLang,
    toggleLayout,
    showGeneralModal,
    setTheme,
    sunmicroPath,
    showComposite,
    compositeTabAcitve,
    draging
  }
})
