import { presetMini } from '@unocss/preset-mini';
import { defineConfig } from '@unocss/vite';

function pxValueToRem(size: number): string {
	return `calc(${size}rem / var(--kolibri-root-font-size, 16))`;
}

function convertRem(value: number): string {
	return pxValueToRem(value * 16);
}

function convertDynamicClassValueToRem(value: string) {
	return pxValueToRem((Number.parseFloat(value) * 16) / 4);
}

export default defineConfig({
	rules: [
		[
			/^p-(\d+)$/,
			([, d]) => ({
				padding: convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^px-(\d+)$/,
			([, d]) => ({
				'padding-left': convertDynamicClassValueToRem(d),
				'padding-right': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^py-(\d+)$/,
			([, d]) => ({
				'padding-top': convertDynamicClassValueToRem(d),
				'padding-bottom': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^ps-(\d+)$/,
			([, d]) => ({
				'padding-inline-start': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^pe-(\d+)$/,
			([, d]) => ({
				'padding-inline-end': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^pt-(\d+)$/,
			([, d]) => ({
				'padding-top': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^pl-(\d+)$/,
			([, d]) => ({
				'padding-left': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^pr-(\d+)$/,
			([, d]) => ({
				'padding-right': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^pb-(\d+)$/,
			([, d]) => ({
				'padding-bottom': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^p-t-(\d+)$/,
			([, d]) => ({
				'padding-top': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^p-l-(\d+)$/,
			([, d]) => ({
				'padding-left': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^p-r-(\d+)$/,
			([, d]) => ({
				'padding-right': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^p-b-(\d+)$/,
			([, d]) => ({
				'padding-bottom': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^m-(\d+)$/,
			([, d]) => ({
				margin: convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^mx-(\d+)$/,
			([, d]) => ({
				'margin-left': convertDynamicClassValueToRem(d),
				'margin-right': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^my-(\d+)$/,
			([, d]) => ({
				'margin-top': convertDynamicClassValueToRem(d),
				'margin-bottom': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^ms-(\d+)$/,
			([, d]) => ({
				'margin-inline-start': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^me-(\d+)$/,
			([, d]) => ({
				'margin-inline-end': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^mt$/,
			() => ({
				'margin-top': pxValueToRem(16),
			}),
		],
		[
			/^ml$/,
			() => ({
				'margin-left': pxValueToRem(16),
			}),
		],
		[
			/^mr$/,
			() => ({
				'margin-right': pxValueToRem(16),
			}),
		],
		[
			/^mb$/,
			() => ({
				'margin-bottom': pxValueToRem(16),
			}),
		],

		[
			/^mt-(\d+)$/,
			([, d]) => ({
				'margin-top': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^ml-(\d+)$/,
			([, d]) => ({
				'margin-left': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^mr-(\d+)$/,
			([, d]) => ({
				'margin-right': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^mb-(\d+)$/,
			([, d]) => ({
				'margin-bottom': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^m-t-(\d+)$/,
			([, d]) => ({
				'margin-top': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^m-l-(\d+)$/,
			([, d]) => ({
				'margin-left': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^m-r-(\d+)$/,
			([, d]) => ({
				'margin-right': convertDynamicClassValueToRem(d),
			}),
		],
		[
			/^m-b-(\d+)$/,
			([, d]) => ({
				'margin-bottom': convertDynamicClassValueToRem(d),
			}),
		],

		[
			/^mb-sm$/,
			() => ({
				'margin-bottom': pxValueToRem(14),
			}),
		],

		[/^gap-(\d+)$/, ([, d]) => ({ gap: convertDynamicClassValueToRem(d) })],
		[/^gap-x-(\d+)$/, ([, d]) => ({ 'column-gap': convertDynamicClassValueToRem(d) })],
		[/^gap-y-(\d+)$/, ([, d]) => ({ 'row-gap': convertDynamicClassValueToRem(d) })],

		[
			/^w-(\d+)rem$/,
			([, d]) => ({
				width: pxValueToRem(Number.parseInt(d) * 16),
			}),
		],

		[
			/^w-sm$/,
			() => ({
				width: pxValueToRem(24 * 16), // 24rem
			}),
		],
	],
	extendTheme: (theme: any) => {
		return {
			...theme,
			fontSize: {
				xs: [convertRem(0.75), '1'],
				sm: [convertRem(0.875), '1.25'],
				base: [convertRem(1), '1.5'],
				lg: [convertRem(1.125), '1.75'],
				xl: [convertRem(1.25), '1.75'],
				'2xl': [convertRem(1.5), '2'],
				'3xl': [convertRem(1.875), '2.25'],
				'4xl': [convertRem(2.25), '2.5'],
				'5xl': [convertRem(3), '1'],
				'6xl': [convertRem(3.75), '1'],
				'7xl': [convertRem(4.5), '1'],
				'8xl': [convertRem(6), '1'],
				'9xl': [convertRem(8), '1'],
				'kol-test': ['625%', '1'],
			},
			borderRadius: {
				DEFAULT: convertRem(0.25),
				none: '0',
				sm: convertRem(0.125),
				md: convertRem(0.375),
				lg: convertRem(0.5),
				xl: convertRem(0.75),
				'2xl': convertRem(1),
				'3xl': convertRem(1.5),
				full: '9999px',
			},
			containers: {
				xs: `(min-width: ${convertRem(20)})`,
				sm: `(min-width: ${convertRem(24)})`,
				md: `(min-width: ${convertRem(28)})`,
				lg: `(min-width: ${convertRem(32)})`,
				xl: `(min-width: ${convertRem(36)})`,
				'2xl': `(min-width: ${convertRem(42)})`,
				'3xl': `(min-width: ${convertRem(48)})`,
				'4xl': `(min-width: ${convertRem(56)})`,
				'5xl': `(min-width: ${convertRem(64)})`,
				'6xl': `(min-width: ${convertRem(72)})`,
				'7xl': `(min-width: ${convertRem(80)})`,
				prose: '(min-width: 65ch)',
			},
			spacing: {
				DEFAULT: convertRem(1),
				none: '0',
				xs: convertRem(0.75),
				sm: convertRem(0.875),
				lg: convertRem(1.125),
				xl: convertRem(1.25),
				'2xl': convertRem(1.5),
				'3xl': convertRem(1.875),
				'4xl': convertRem(2.25),
				'5xl': convertRem(3),
				'6xl': convertRem(3.75),
				'7xl': convertRem(4.5),
				'8xl': convertRem(6),
				'9xl': convertRem(8),
			},
			textIndent: {
				DEFAULT: convertRem(1.5),
				xs: convertRem(0.5),
				sm: convertRem(1),
				md: convertRem(1.5),
				lg: convertRem(2),
				xl: convertRem(2.5),
				'2xl': convertRem(3),
				'3xl': convertRem(4),
			},
			textStrokeWidth: {
				DEFAULT: convertRem(1.5),
				none: '0',
				sm: 'thin',
				md: 'medium',
				lg: 'thick',
			},
		};
	},
	presets: [presetMini()],
});