import { kebabCase, ThemeEnum } from '@eciol/shared';
import { ConfigProvider, theme } from 'ant-design-vue';
import { MapToken } from 'ant-design-vue/es/theme/interface';
import { computed } from 'vue';

import { useRootSetting } from '../setting';
import { setCssVar } from './util';

export * from './dark';
export * from './updateBackground';
export * from './updateColorWeak';
export * from './updateGrayMode';
export * from './useDarkModeTheme';

const filterColors = (token: MapToken) => {
  return Object.fromEntries(
    Object.entries(token).filter(([_key, value]) => {
      return typeof value === 'string';
    }),
  );
};

export async function changeTheme(color: string) {
  const { getDarkMode, getDarkTheme, getLightTheme } = useRootSetting();
  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
  setCssVar('--primary-color', color);
  const { defaultAlgorithm, defaultSeed, darkAlgorithm } = theme;
  const mapToken = isDark.value
    ? darkAlgorithm({
        ...defaultSeed,
        ...(getDarkTheme.value?.token ?? {}),
        colorPrimary: color,
        colorInfo: color,
      })
    : defaultAlgorithm({
        ...defaultSeed,
        ...(getLightTheme.value?.token ?? {}),
        colorPrimary: color,
        colorInfo: color,
      });
  Object.entries(filterColors(mapToken)).forEach(([key, value]) => {
    setCssVar(`--${kebabCase(key)}`, value);
  });
  ConfigProvider.config({
    theme: {
      primaryColor: color,
      infoColor: color,
    },
  });
}