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'

/**
 * App state store.
 */
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)
  const compositeTabAcitve = ref('log')
  const draging = ref(false)
  const libraryDragging = 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
    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,
    libraryDragging
  }
})
