import '../../assets/styles/transition.css'
import store from '../../store/index.js'
import { inject } from 'vue'
import { projectName } from '@/config/settings/index.js'
import { toHump } from '@/utils/index.js'
function getComponentName(key) {
  if (!key) {
    return ''
  }
  const paths = key.split('/')
  const name = paths
    .filter((it) => !!it && it !== '.')
    .reverse()
    .find((it) => it !== 'index.vue' && it !== 'index.ts' && it !== 'index.js')
    ?.replace('.vue', '')
  return name || ''
}
export function registerComponents(app) {
  const components = import.meta.glob('./**/**.{vue,tsx}', { eager: true })
  Object.keys(components).forEach((it) => {
    const component = components[it]
    app.component(component.default.name || toHump(getComponentName(it)), component.default)
  })
}
const key = Symbol('layout_store')
function install(app, options) {
  if (import.meta.env.MODE === 'development') {
    console.warn('install layout store start')
  }
  registerComponents(app)
  store.start(options || {})
  app.config.globalProperties.$layoutStore = store
  app.provide(key, store)
  if (import.meta.env.MODE === 'development') {
    console.warn('install layout store end')
  }
}
export function useLayoutStore() {
  return inject(key)
}
export function useTitle(title) {
  document.title = projectName + ' | ' + (title || '')
}
export { default as Layout } from '@/components/skeleton/Layout.vue'
export { mapTwoLevelRouter } from '../../utils/index.js'
export default {
  install,
}

