import { defineConfig, presetAttributify, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss';
import { SCREEN_BREAK_POINTS, SHORTCUTS } from '@handpear/enums';
import presetRemToPx from '@unocss/preset-rem-to-px';

export default defineConfig({
  presets: [presetUno(), presetRemToPx(), presetAttributify({ prefixedOnly: true })],
  rules: [
    [
      /^(wh|hw)-(\d+)$/,
      ([, , d]) => ({ width: `${Number(d) / 4}rem`, height: `${Number(d) / 4}rem` }),
      { layer: 'utilities' },
    ],
  ],
  safelist: [],
  shortcuts: SHORTCUTS,
  theme: {
    breakpoints: {
      xs: `${SCREEN_BREAK_POINTS.XS}px`,
      sm: `${SCREEN_BREAK_POINTS.SM}px`,
      md: `${SCREEN_BREAK_POINTS.MD}px`,
      lg: `${SCREEN_BREAK_POINTS.LG}px`,
      xl: `${SCREEN_BREAK_POINTS.XL}px`,
      xxl: `${SCREEN_BREAK_POINTS.XXL}px`,
    },
    colors: {
      dark: '#000000',
      white: '#ffffff',
      primary: {
        DEFAULT: 'var(--color-primary)',
        hover: 'var(--color-primary-hover)',
        active: 'var(--color-primary-active)',
        bg: {
          DEFAULT: 'var(--color-primary-bg)',
          hover: 'var(--color-primary-bg-hover)',
        },
      },
      info: {
        DEFAULT: 'var(--color-info)',
        hover: 'var(--color-info-hover)',
        active: 'var(--color-info-active)',
        bg: {
          DEFAULT: 'var(--color-info-bg)',
          hover: 'var(--color-info-bg-hover)',
        },
      },
      success: {
        DEFAULT: 'var(--color-success)',
        hover: 'var(--color-success-hover)',
        active: 'var(--color-success-active)',
        bg: {
          DEFAULT: 'var(--color-success-bg)',
          hover: 'var(--color-success-bg-hover)',
        },
      },
      warning: {
        DEFAULT: 'var(--color-warning)',
        hover: 'var(--color-warning-hover)',
        active: 'var(--color-warning-active)',
        bg: {
          DEFAULT: 'var(--color-warning-bg)',
          hover: 'var(--color-warning-bg-hover)',
        },
      },
      error: {
        DEFAULT: 'var(--color-error)',
        hover: 'var(--color-error-hover)',
        active: 'var(--color-error-active)',
        bg: {
          DEFAULT: 'var(--color-error-bg)',
          hover: 'var(--color-error-bg-hover)',
        },
      },
    },
  },
  transformers: [transformerDirectives(), transformerVariantGroup()],
});