<script setup lang="ts">
import {
  NConfigProvider,
  NMessageProvider,
  NDialogProvider,
  darkTheme,
  zhCN,
  dateZhCN,
} from 'naive-ui'
import { computed } from 'vue'

import { useAppStore } from '@/stores/app'
import { darkThemeOverrides, themeOverrides } from '@/theme/naive'

const app = useAppStore()
const theme = computed(() => (app.dark ? darkTheme : null))
const overrides = computed(() => (app.dark ? darkThemeOverrides : themeOverrides))
</script>

<template>
  <NConfigProvider
    :theme="theme"
    :theme-overrides="overrides"
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <NMessageProvider>
      <NDialogProvider>
        <RouterView />
      </NDialogProvider>
    </NMessageProvider>
  </NConfigProvider>
</template>
