// https://github.dev/unocss/unocss/tree/main/examples/vite-vue3

import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss';
import { presetAnimations } from 'unocss-preset-animations';
// import presetChinese, { chineseTypography } from 'unocss-preset-chinese';
import { presetShadcn } from 'unocss-preset-shadcn';

export default defineConfig({
  // By default, `.ts` and `.js` files are NOT extracted.
  // If you want to extract them, use the following configuration.
  // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        'src/shadcn/components/**/*.{js,ts}',
        'src/components/InspiraUI/**/*.{js,ts}',
      ],
    },
  },
  presets: [
    presetWind3({
      /* prefix: "u-", */
      dark: {
        dark: '.app-dark',
      },
    }),
    presetAnimations(),
    // https://github.com/unocss-community/unocss-preset-shadcn?tab=readme-ov-file#usage
    // npx shadcn-vue@latest add button
    presetShadcn(
      {
        color: 'zinc',
        // With default setting for SolidUI, you need to set the darkSelector option.
        darkSelector: '.app-dark',
      },
      {
        // If you are using reka ui.
        componentLibrary: 'reka',
      },
    ),

    // chineseTypography(),
    // presetChinese({
    //   chineseType: 'simplified', // 指定文本为简体中文
    // }),

    // https://unocss.dev/presets/attributify
    presetAttributify(),
  ],

  shortcuts: [
    {
      'logo-transform': 'i-icon:pacman w-6em h-6em transform transition-800',
      pacman: 'i-icon:pacman text-(pink 36)',
    },
    {
      // https://github.com/primefaces/tailwindcss-primeui/blob/d5e903377e015b7c63cb5edf42490b9d6954ef04/src/utils/preset.js
      'text-muted-color': 'text-[var(--p-text-muted-color)]',
    },
  ],
  theme: {
    // https://unocss.dev/presets/wind#differences-from-tailwind-css
    // https://www.npmjs.com/package/unocss-preset-animations
    // https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion
    animation: {
      counts: {
        fadeout: '1',
        scalein: '1',
      },
      durations: {
        fadeout: '0.15s',
        scalein: '0.15s',
      },
      keyframes: {
        fadeout: '{0% { opacity: 1; } 100% { opacity: 0; }}',
        scalein: '{0% { opacity: 0; transform: scaleY(0.8); } 100% { opacity: 1; transform: scaleY(1); }}',
      },
      properties: {
        fadeout: {},
        scalein: {
          transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)',
        },
      },
      timingFns: {
        fadeout: 'linear',
        scalein: 'linear',
      },
    },

    // https://unocss.dev/config/theme#usage
    colors: {
      'surface-0': 'var(--p-surface-0)', // text-surface-0
      'surface-900': 'var(--p-surface-900)', // text-surface-900
    },
  },
  transformers: [
    //https://unocss.dev/transformers/variant-group
    transformerVariantGroup(),

    // https://unocss.dev/transformers/directives
    transformerDirectives(),
  ],
});

// text-[var(--h-gray-1)]
//  <div class="i-icon:pacman text-(pink 36)" />