import {
  defineConfig,
  presetUno, // UnoCSS 的默认预设。目前相当于 @unocss/preset-wind https://unocss.nodejs.cn/presets/uno (rules: https://github.com/unocss/unocss/blob/main/packages/preset-mini/src/_rules)
  presetAttributify, // 属性化预设
  // presetIcons, // 对 UnoCSS 使用纯 CSS 的任何图标
  transformerDirectives // 适用于 @apply、@screen 和 theme() 指令的 UnoCSS 转换器：@unocss/transformer-directives
} from 'unocss'

export default defineConfig({
  // ...UnoCSS options
  presets: [presetUno(), presetAttributify()],
  transformers: [transformerDirectives()],
  shortcuts: {
    'f-b': 'flex justify-between items-center',
    'f-c': 'flex justify-center items-center',
    'f-s': 'flex justify-start items-center',
    'f-e': 'flex justify-end items-center',
    'text-overflow': 'truncate',
    'wh-full': 'w-full h-full'
  },
  rules: [
    [/^b-(\d+)$/, (match) => ({ 'border-width': `${match[1]}px` })],
    [/^b-(\d+)-#([\w]+)$/, (match) => ({ border: `solid ${match[1]}px #${match[2]}` })],
    [/^bt-(\d+)-#([\w]+)$/, (match) => ({ 'border-top': `solid ${match[1]}px #${match[2]}` })],
    [/^bb-(\d+)-#([\w]+)$/, (match) => ({ 'border-bottom': `solid ${match[1]}px #${match[2]}` })],
    [/^bl-(\d+)-#([\w]+)$/, (match) => ({ 'border-left': `solid ${match[1]}px #${match[2]}` })],
    [/^br-(\d+)-#([\w]+)$/, (match) => ({ 'border-right': `solid ${match[1]}px #${match[2]}` })],
    [/^px-(\d+)$/, (match) => ({ 'padding-left': `${match[1]}px`, 'padding-right': `${match[1]}px` })],
    [/^py-(\d+)$/, (match) => ({ 'padding-top': `${match[1]}px`, 'padding-bottom': `${match[1]}px` })],
    [/^mx-(\d+)$/, (match) => ({ 'margin-left': `${match[1]}px`, 'margin-right': `${match[1]}px` })],
    [/^my-(\d+)$/, (match) => ({ 'margin-top': `${match[1]}px`, 'margin-bottom': `${match[1]}px` })],
    [/^pt-(\d+)$/, (match) => ({ 'padding-top': `${match[1]}px` })],
    [/^pb-(\d+)$/, (match) => ({ 'padding-bottom': `${match[1]}px` })],
    [/^pl-(\d+)$/, (match) => ({ 'padding-left': `${match[1]}px` })],
    [/^pr-(\d+)$/, (match) => ({ 'padding-right': `${match[1]}px` })],
    [/^mt-(\d+)$/, (match) => ({ 'margin-top': `${match[1]}px` })],
    [/^mb-(\d+)$/, (match) => ({ 'margin-bottom': `${match[1]}px` })],
    [/^ml-(\d+)$/, (match) => ({ 'margin-left': `${match[1]}px` })],
    [/^mr-(\d+)$/, (match) => ({ 'margin-right': `${match[1]}px` })]
    // [
    //   /^bgimage-(\w+)-(.+)-(svg|png|jpg|gif)$/,
    //   ([, dir, fname, fext]) => {
    //     return {
    //       'background-image': `url(@/assets/${dir}/${fname}.${fext})`
    //     }
    //   }
    // ]
  ]
})