import type { Preset, SourceCodeTransformer } from 'unocss'

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

import { isH5, isMp } from '@uni-helper/uni-env'
import { rules } from './rules'
// import { shortcuts } from './shortcuts'
import { theme } from './theme'

import { presetApplet, presetRemRpx, transformerApplet, transformerAttributify } from 'unocss-applet'
import {Theme} from "unocss/preset-mini";
// import {presetFastlane} from '@fastlane-design/uni'
const presets: Preset[] = []

const transformers: SourceCodeTransformer[] = []
const darkMode = isH5 ? 'class' : 'media'

if (isMp) {
  // presets.push(presetApplet({ dark: darkMode }))
  presets.push(presetApplet())
  presets.push(presetRemRpx())
  transformers.push(transformerAttributify({ ignoreAttributes: ['block', 'fixed'] }))
  transformers.push(transformerApplet())
}
else {
  presets.push(presetUno({ dark: darkMode }))
  presets.push(presetAttributify())
  presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}
const colors = Object.keys(theme.colors!)

export function presetFastlane(): Preset<Theme> {
  return {
    name: 'fastlane/preset',
    theme,
    rules,
    safelist: [
      // common
      ...colors.map(c => `f-${c}`),
      ...colors.map(c => `!f-${c}`),

      // shortcuts
      // ...Object.keys(shortcuts),
    ]
  }
}
export default defineConfig({
  // cli: {
  //   entry: {
  //     patterns: ['components/**/*.{vue,ts}'],
  //     outFile: 'dist/styles.css',
  //   },
  // },
  presets: [
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    ...presets,
    presetFastlane(),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
  theme: {
    // preflightRoot: isMp ? ['page,::before,::after'] : undefined,
    preflightRoot: isMp ? ['page,::before,::after'] : undefined,
  },
  shortcuts: {
    'f-bg': 'bg-[#f8f8f8]',
    'f-bg-2': 'bg-white',
    'f-border': 'border-[#EBEDF0]',
    'f-active': 'bg-[#F2F3F5]',
    'f-active-h5': 'active:bg-[#F2F3F5]',
    'f-text-primary': 'text-[#F94032]',
    'f-text-color': 'text-[#323233]',
    'f-text-color-2': 'text-[#969799]',
    'f-text-color-3': 'text-[#C8C9CC]',

    'f-text-mini': 'text-xs',
    'f-text-small': 'text-sm',
    'f-text-normal': 'text-base',
    'f-text-large': 'text-lg',

    'f-transition': 'transition-all duration-200',

    'f-solid': 'bg-context text-white',
    'f-outline': 'bg-transparent border border-solid border-context text-context ',
    'f-ghost': 'bg-transparent border border-dashed border-context text-context',
    'f-light': 'bg-context text-context bg-op20',
    'f-text': 'bg-transparent text-context',

    'f-hairline': 'relative after:content-[\'_\'] after:pointer-events-none after:absolute after:box-border after:top--50% after:right--50% after:bottom--50% after:left--50% after:f-border after:border-solid after:border-0 after:scale-50',
    'f-hairline-bottom': 'f-hairline after:border-b-1px'
  },
  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)' }],
  ],
})