/* eslint-disable */
import {
  defineConfig,
  toEscapedSelector as e,
  presetUno,
  presetIcons,
} from 'unocss';
import transformerVariantGroup from '@unocss/transformer-variant-group';

const createPresetIcons = (): any => {
  const VITE_USE_ONLINE_ICON = import.meta.env.VITE_USE_ONLINE_ICON === 'true';

  if (VITE_USE_ONLINE_ICON) {
    return [];
  } else {
    return [
      presetIcons({
        prefix: '',
        //由于默认加载的是所有的图标，启动会非常慢，可以在这里去加载需要的图标，确保启动速度
        collections: {
          antDesign: () =>
            import('@iconify/json/json/ant-design.json').then((i) => i.default),
          ion: () =>
            import('@iconify/json/json/ion.json').then((i) => i.default),
          ep: () => import('@iconify/json/json/ep.json').then((i) => i.default),
          tDesign: () =>
            import('@iconify/json/json/tdesign.json').then((i) => i.default),
          emojione: () =>
            import('@iconify/json/json/emojione.json').then((i) => i.default),
          // mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
          // logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
        },
      }),
    ];
  }
};

export default defineConfig({
  rules: [
    [
      /^overflow-ellipsis$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector);
        return `${selector} {
                  text-overflow: ellipsis;
                }`;
      },
    ],
    //
    [
      /^custom-hover$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector);
        return `${selector} {
                  display: flex;
                  height: 100%;
                  padding: 1px 10px 0;
                  cursor: pointer;
                  align-items: center;
                  transition: background var(--transition-time-02);
                }
                /* you can have multiple rules */
                ${selector}:hover {
                  background-color: var(--top-header-hover-color);
                }
                .dark ${selector}:hover {
                  background-color: var(--el-bg-color-overlay);
                }`;
      },
    ],
    [
      /^layout-border__left$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector);
        return `${selector}:before {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 1px;
                  height: 100%;
                  background-color: var(--left-menu-border-color);
                  z-index: 3;
                }`;
      },
    ],
    [
      /^layout-border__right$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector);
        return `${selector}:after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 1px;
                height: 100%;
                background-color: var(--el-border-color);
                z-index: 3;
              }`;
      },
    ],
    [
      /^layout-border__top$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector);
        return `${selector}:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--el-border-color);
                z-index: 3;
                }`;
      },
    ],
    [
      /^layout-border__bottom$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector);
        return `${selector}:after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: var(--el-border-color);
                z-index: 3;
              }`;
      },
    ],
  ],
  presets: [
    presetUno({
      dark: 'class',
      attributifyPseudo: false,
    }),
    ...createPresetIcons(),
  ],
  transformers: [transformerVariantGroup()],
  content: {
    pipeline: {
      include: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|ts)($|\?)/],
    },
  },
});