import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'
import type { DictMap } from '@/utils/global'

export const useAppStore = defineStore('app', () => {
  const nav = reactive({
    isCollapse: false,
    navClass: 'icon-outdent',
    mobile: false,
    horizontal: false
  })

  const dict = ref<DictMap>({})

  function isCollapseClick() {
    nav.isCollapse = !nav.isCollapse
    nav.navClass = nav.isCollapse ? 'icon-indent' : 'icon-outdent'
  }

  function toggleMobile() {
    nav.mobile = !nav.mobile
  }

  function setHorizontal(data: boolean) {
    nav.horizontal = data
  }

  function setDict(data: DictMap) {
    dict.value = data
  }

  return {
    nav,
    dict,
    isCollapseClick,
    toggleMobile,
    setHorizontal,
    setDict
  }
})
