import { defineConfig, presetIcons } from 'unocss'

// https://github.com/MellowCo/unocss-preset-weapp
import presetWeapp from 'unocss-preset-weapp'
import { defaultAttributes, extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify({
    attributes: [...defaultAttributes, 'icon'],
})

const ICONS = [
    'ic-baseline-keyboard-arrow-up',
    'ic-baseline-keyboard-arrow-down',
    'ic-baseline-keyboard-arrow-left',
    'ic-baseline-keyboard-arrow-right',
    'ic-baseline-arrow-back-ios',
    'ic-baseline-arrow-forward-ios',
    'solar-double-alt-arrow-up-line-duotone',
    'solar-double-alt-arrow-down-line-duotone',
]

export default defineConfig({
    safelist: ICONS.map((icon) => `icon-${icon.replace(/:/g, '-')}`),
    shortcuts: [
        {
            bg: 'bg-[#F4F5F7]',
            'border-base': 'border border-[#eee]',
            'flex-center': 'flex justify-center items-center',
        },
    ],
    presets: [
        // https://github.com/MellowCo/unocss-preset-weapp
        presetWeapp(),
        // autocomplete attributes
        presetWeappAttributify(),
        // icon
        presetIcons({
            prefix: ['i-', 'icon-'],
            extraProperties: {
                display: 'inline-flex',
                'vertical-align': 'middle',
            },
        }),
    ],
    transformers: [
        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
        transformerAttributify(),

        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
        transformerClass(),
    ],
})
