<script lang="ts" setup>
import { ConfigProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/locale/zh_CN'
import enUS from 'ant-design-vue/locale/en_US'
import dayjs from 'dayjs'
import { computed, unref, watch } from 'vue'
import type { DrawioConfig } from '../Library/types'
// import 'dayjs/locale/zh-cn'
// import 'dayjs/locale/en-us'
import { useParseParams } from '../LoadData'

const { locale } = useParseParams()

const { language } = (JSON.parse(localStorage.getItem('.drawio-config') || '') || {}) as DrawioConfig

const getLocale = computed(
  () => {
    return {
      dayjs: language || (locale && locale === 'en' ? 'en-us' : 'zh-cn'),
      antd: (language && locale === 'en' ? enUS : zhCN) || (locale && locale === 'en' ? enUS : zhCN),
    }
  },
)

watch(
  () => unref(getLocale).dayjs,
  (target) => {
    dayjs.locale(target)
  },
)
</script>

<template>
  <ConfigProvider :locale="getLocale.antd">
    <slot />
  </ConfigProvider>
</template>