// Set the Preflight flag based on the build target.
const includePreflight = 'editor' === process.env._TW_TARGET ? false : true;
import plugin from 'tailwindcss/plugin';
import themejson from '@_tw/themejson';

const themecolors = themejson().config.theme.extend.colors;

module.exports = {
	presets: [
		// Manage Tailwind Typography's configuration in a separate file.
		require('./tailwind-typography.config.js'),
	],
	content: [
		// Ensure changes to PHP files and `theme.json` trigger a rebuild.
		'./theme/**/*.php',
	],
	darkMode: 'class',
	theme: {
		// Extend the default Tailwind theme.
		extend: {},
	},
	corePlugins: {
		// Disable Preflight base styles in builds targeting the editor.
		preflight: includePreflight,
	},
	plugins: [
		//	require('daisyui'),
		// Add Tailwind Typography (via _tw fork).
		require('@_tw/typography'),

		// Extract colors and widths from `theme.json`.
		require('@_tw/themejson'),

		// Uncomment below to add additional first-party Tailwind plugins.
		require('@tailwindcss/forms'),
		require('@tailwindcss/aspect-ratio'),
		require('@tailwindcss/container-queries'),
		plugin(function ({ theme, addUtilities }) {
			const colorUtilities = {};
			const colors = theme('colors');
		   // const themecolors = themejson.config.theme.extend.colors;
			for (const color in themecolors) {
				colorUtilities[`.btn-${color}`] = {
					'--btn-color': themecolors[color]
				}
			}
			for (const color in colors) {
				if (typeof colors[color] === 'object') {
					if (colors[color]['500'] !== undefined) {
						colorUtilities[`.btn-${color}`] = {
							'--btn-color': colors[color]['500']
						}
						colorUtilities[`.badge-${color}`] = {
							'background': colors[color]['200'],
							'color': colors[color]['800'],
							'border-color': colors[color]['800'],
						}
						colorUtilities[`.alert-${color}`] = {
							'background': colors[color]['200'],
							'color': colors[color]['800'],
							'border-color': colors[color]['800'],
						}
						colorUtilities[`.disabled-${color}`] = {
							'--disabled-color': colors[color]['500'],
						}
						colorUtilities[`.enabled-${color}`] = {
							'--enabled-color': colors[color]['500'],
						}
					}
				}
			}


			addUtilities(colorUtilities);
		})
	],
	safelist: [
		{ pattern: /btn-([a-zA-Z]+)$/ },
		{ pattern: /bg-([a-zA-Z]+)$/, variants: ['has-\[\:checked\]'] },
		{ pattern: /text-([a-zA-Z]+)$/, variants: ['hover', 'group-hover', 'has-\[\:checked\]'] },
		{ pattern: /shadow-([a-zA-Z]+)$/ },
		{ pattern: /border-([a-zA-Z]+)$/ },
		{ pattern: /bg-([a-zA-Z]+)-500$/, variants: ['has-\[\:checked\]'] },
		{ pattern: /text-([a-zA-Z]+)-500$/, variants: ['hover', 'group-hover', 'has-\[\:checked\]'] },
		{ pattern: /border-([a-zA-Z]+)-500$/, variants: ['hover', 'group-hover', 'has-\[\:checked\]'] },
	]
};