import type {Preset, SourceCodeTransformer} from 'unocss'
import {
    defineConfig,
    presetUno,
    presetAttributify,
    presetIcons,
    transformerDirectives,
    transformerVariantGroup
} from 'unocss'
import {presetRemRpx} from 'unocss-applet'
import {presetAnimations} from 'unocss-preset-animations'


const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []
presets.push(presetUno())
presets.push(presetAnimations())
presets.push(presetAttributify())
presets.push(presetRemRpx({mode: 'rpx2rem'}))


export default defineConfig({
    presets: [
        // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
        presetIcons({
            scale: 1.2,
            warn: true,
            extraProperties: {
                display: 'inline-block',
                'vertical-align': 'middle',
            },
        }),
        ...presets,
    ],
    /**
     * 自定义快捷语句
     * @see https://github.com/unocss/unocss#shortcuts
     */
    shortcuts: [
        ['center', 'flex justify-center items-center'],
        ['flex-center-sb', 'flex justify-between items-center'],
        ['bg-primary', 'bg-#333'],
        ['border-primary', 'border-#333'],
        ['bg-common', 'bg-#F6F6F6'],
        ['text-primary', 'text-#333'],
        ['text-50-bold', 'text-50rpx lh-50rpx text-#14181B font-bold'],
        ['text-48-bold', 'text-48rpx lh-48rpx text-#14181B font-bold'],
        ['text-38-bold', 'text-38rpx lh-52rpx text-primary font-bold'],
        ['text-36-bold', 'text-36rpx lh-50rpx text-primary font-bold'],
        ['text-34-bold', 'text-34rpx lh-48rpx text-primary font-bold'],
        ['text-30-bold', 'text-30rpx lh-42rpx text-primary font-bold'],
        ['text-28-bold', 'text-28rpx lh-28rpx text-primary font-bold'],
        ['text-24-bold', 'text-24rpx lh-34rpx text-primary font-bold'],
        ['text-20-bold', 'text-20rpx lh-30rpx text-primary font-bold'],
    ],
    transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
    rules: [
        [
            'p-safe',
            {
                padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
            },
        ],
        ['pt-safe', {'padding-top': 'env(safe-area-inset-top)'}],
        ['pb-safe', {'padding-bottom': 'env(safe-area-inset-bottom)'}],
    ],
})

/**
 * 最终这一套组合下来会得到：
 * mp 里面：mt-4 => margin-top: 32rpx  == 16px
 * h5 里面：mt-4 => margin-top: 1rem == 16px
 *
 * 另外，我们还可以推算出 UnoCSS 单位与设计稿差别4倍。
 * 375 * 4 = 1500，把设计稿设置为1500，那么设计稿里多少px，unocss就写多少述职。
 * 举个例子，设计稿显示某元素宽度100px，就写w-100即可。
 *
 * 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
 * rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
 */