import {
	defineConfig,
	presetIcons,
	presetTypography,
	presetUno,
	presetWebFonts,
	transformerDirectives,
	transformerVariantGroup,
} from 'unocss';

/**
 * Floor tile pattern from https://heropatterns.com/, licensed under the CC BY 4.0 license.
 * @returns {string} - The "url()" string of the pattern.
 */
function heropattern() {
	return `url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10h10v10H0V10zM10 0h10v10H10V0z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E")`;
}

export default defineConfig({
	cli: {
		entry: {
			outFile: './assets/css/uno.css',
			patterns: [
				'./{templates,handlers}/**/*.templ',
				'./assets/**/*.{js,css,html}',
				'!./assets/css/uno.css',
			],
		},
	},
	presets: [
		presetIcons(),
		presetTypography(),
		presetUno({
			dark: 'media',
		}),
		presetWebFonts({
			fonts: {
				japanese: {
					name: 'Kaisei Decol',
				},
				sans: {
					name: 'Quattrocento Sans',
				},
				serif: {
					name: 'Quattrocento',
				},
			},
			provider: 'none',
		}),
	],
	rules: [
		[/^(min-|max-)?(w|h)-screen/, ([, m, d]) => [
			[`${m || ''}${d == 'w' ? 'width' : 'height'}`, `100v${d}`],
			[`${m || ''}${d == 'w' ? 'width' : 'height'}`, `100dv${d}`],
		]],

		[/^text-stroke-(\d+)px/, ([,d]) => {
			return {
				'-webkit-text-stroke-width': `${d}px`,
				'text-stroke-width': `${d}px`,
			};
		}],
		[/^text-stroke-(#?[A-z]+)/, ([,c]) => {
			console.log('HELLO WORLD');
			return {
				'-webkit-text-stroke-color': c,
				'text-stroke-color': c,
			};
		}],

		[/^vertical-(lr|rl)/, ([, d]) => {
			return { 'writing-mode': `vertical-${d}` };
		}],
		['horizontal-tb', { 'writing-mode': 'horizontal-tb' }],

		['bg-heropattern', { 'background-image': heropattern() }],
	],
	/* 	theme: {
		colors: {
			white: 'var(--white)',
			black: 'var(--black)',
			cyan: 'var(--cyan)',
			purple: 'var(--purple)',
			foreground: {
				'00': 'var(--foreground-00)',
			},
			background: {
				'00': 'var(--background-00)',
			},
			accent: {
				'00': 'var(--accent-00)',
			},
		},
	}, */
	transformers: [transformerDirectives(), transformerVariantGroup()],
});