import type { Plugin } from 'vite';
import path from 'path';
import themePreprocessorPlugin from '@zougt/vite-plugin-theme-preprocessor';

export function configThemePlugin(): Plugin[] {
  const includeStyles = {
    '.ant-button-primary:hover, .ant-button-primary:focus': {
      color: '#FFFFFF',
    },
  };
  const plugin = [
    themePreprocessorPlugin({
      less: {
        // 是否启用任意主题色模式，这里不启用
        arbitraryMode: false,
        multipleScopeVars: [
          {
            scopeName: 'theme-default',
            path: path.resolve('src/styles/theme/theme-default.less'),
            includeStyles,
          },
          {
            scopeName: 'theme-dark',
            path: path.resolve('src/styles/theme/theme-dark.less'),
            includeStyles,
          },
        ],
        includeStyleWithColors: [
          {
            // color也可以是array，如 ["#ffffff","#000"]
            color: '#ffffff',
          },
          {
            color: ['transparent', 'none'],
            excludeSelectors: ['.ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active'],
          },
        ],
        // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
        extract: false,
      },
    }),
  ];

  return plugin as unknown as Plugin[];
}