<script setup lang="ts">
import { computed, provide, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStyleTag } from '@vueuse/core';
import { theme } from 'ant-design-vue';
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';

import { generateThemeCSSVar } from '@/utils';
import { LanguageType } from '@/constants';
import { SET_COLOR_PRIMARY } from '@/constants/inject-key';

import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';

import 'dayjs/locale/zh-cn';

const colorPrimary = ref('#32BAC0');

const themeConfig = computed<ThemeConfig>(() => {
  return {
    token: {
      colorPrimary: colorPrimary.value,
    },
  };
});

const setColorPrimary = (color: string) => {
  colorPrimary.value = color;
};

const { locale: language } = useI18n();

const locale = computed(() => {
  return language.value === LanguageType.ZH ? zhCN : enUS;
});

const { css } = useStyleTag('');
const { token } = theme.useToken();

watch(token, () => {
  css.value = generateThemeCSSVar(token.value, 'antd');
});

provide(SET_COLOR_PRIMARY, setColorPrimary);
</script>

<template>
  <AConfigProvider :theme="themeConfig" :locale="locale" :auto-insert-space-in-button="false">
    <slot></slot>
  </AConfigProvider>
</template>
