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

const props = defineProps<ConfigComponentProps>()

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 && language === 'en' ? enUS : zhCN) || zhCN,
    }
  },
)

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

const getComponent = computed(() => {
  const { cell } = props
  const key = cell?.getAttribute(CellAttributeKeyEnum.COMPONENT_KEY)
  const categoryKey = cell?.getAttribute(CellAttributeKeyEnum.CATEGORY)
  const Component = fetchConfigComponent({ key, category: categoryKey })
  return Component
})
</script>

<template>
  <ConfigProvider :locale="getLocale.antd">
    <StyleProvider hash-priority="high">
      <component :is="getComponent" v-bind="props" />
    </StyleProvider>
  </ConfigProvider>
</template>