<script setup lang="ts">
import { zhCN, dateZhCN } from 'naive-ui'
import { provide, ref } from 'vue'
import mitt from 'mitt'
import { themeOverrides } from '@/config/theme-config'
import { useResizeObserver } from '@vueuse/core'
import { useDesignSettingStore } from '@/store/modules/design-setting'

const designSettingStore = useDesignSettingStore()

const emitter = mitt<MittEvents>()

provide('emitter', emitter)

const currentLocale = ref(zhCN)
const currentDateLocale = ref(dateZhCN)

const rootContainer = ref<HTMLDivElement | null>(null)

useResizeObserver(rootContainer, (entries) => {
  const entry = entries[0]
  const { width } = entry.contentRect

  /**
   * 0 < width <= 760 隐藏侧边栏
   * 760 < width <= 990 折叠侧边栏
   * width > 990 展开侧边栏
   */
  if (width <= 760) {
    designSettingStore.toggleIsMobileLayout(true)
    designSettingStore.toggleSidebarDisplayStatus('hidden')
  } else if (760 < width && width <= 990) {
    designSettingStore.toggleIsMobileLayout(false)
    designSettingStore.toggleSidebarDisplayStatus('collapse')
  } else {
    designSettingStore.toggleIsMobileLayout(false)
    designSettingStore.toggleSidebarDisplayStatus('expand')
  }
})
</script>

<template>
  <div ref="rootContainer" class="h-full w-full">
    <NConfigProvider
      class="h-full w-full"
      :locale="currentLocale"
      :date-locale="currentDateLocale"
      :theme-overrides="themeOverrides"
    >
      <RouterView v-slot="{ Component }">
        <Component :is="Component" />
      </RouterView>
    </NConfigProvider>
  </div>
</template>
