import type { Preset } from 'unocss';
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';
import { presetUni } from '@uni-helper/unocss-preset-uni';
import { presetLegacyCompat } from '@unocss/preset-legacy-compat';
import { defineConfig, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';

export default defineConfig({
  presets: [
    // https://uni-helper.js.org/unocss-preset-uni
    presetUni({
      attributify: {
        prefixedOnly: true,
      },
    }),
    // https://unocss.dev/presets/icons
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
      // 自定义图标
      collections: {
        // 从本地文件系统加载 svg 图标
        'my-icons': FileSystemIconLoader('./src/static/icons'),
        // 从在线图标库加载图标
        // 'my-online-icons': async (iconName) => {
        //   return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text());
        // },
      },
    }),
    /**
     * 启用 legacy-compat 模式(处理低端安卓机的样式问题)
     * @see https://unocss.dev/presets/legacy-compat
     */
    presetLegacyCompat({
      commaStyleColorFunction: true,
      legacyColorSpace: true,
    }) as Preset,
  ],
  /**
   * 自定义快捷语句
   * @see https://github.com/unocss/unocss#shortcuts
   */
  shortcuts: {
    'border-base': 'border border-[var(--border-primary)]',
    'center': 'flex justify-center items-center',
  },
  rules: [
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ],
  theme: {
    colors: {
      // 主题颜色
      'primary': 'var(--brand-primary)',
      'secondary': 'var(--brand-secondary)',
      'tertiary': 'var(--brand-tertiary)',
      'success': 'var(--color-success)',
      'warning': 'var(--color-warning)',
      'error': 'var(--color-error)',
      // 文字颜色
      'text-main': 'var(--text-primary)',
      'text-content': 'var(--text-secondary)',
      'text-tips': 'var(--text-tertiary)',
      'text-light': 'var(--text-quaternary)',
      'text-disabled': 'var(--text-quaternary)',
      // 背景颜色
      'bg-main': 'var(--bg-page)',
      'bg-secondary': 'var(--bg-container)',
      'bg-muted': 'var(--bg-muted)',
      // 边框颜色
      'border-main': 'var(--border-primary)',
      'border-secondary': 'var(--border-secondary)',
    },
  },
  transformers: [
    // 启用指令功能：主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
    transformerDirectives(),
    // 启用 () 分组功能
    transformerVariantGroup(),
  ],
});