import {Config} from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';
import {
	radioButtonPlugin,
	menuSelectPlugin,
	radioTickBoxPlugin,
	dropdownSelectPlugin,
} from '../../categories/web/choice/react/src';
import {
	colorPickerPlugin,
} from '../../categories/web/color/react/src';
import {
	menuMultiSelectPlugin,
	tagInputPlugin,
	toggleButtonPlugin,
	toggleSwitchPlugin,
	toggleTickBoxPlugin,
} from '../../categories/web/multichoice/react/src';
import {
	numberSpinnerPlugin,
	sliderPlugin,
} from '../../categories/web/number/react/src';
import {
	dateDropdownPlugin,
	timeSpinnerPlugin,
} from '../../categories/web/temporal/react/src';

const config: Config = {
	content: [
		'../../categories/web/*/react/src/**/*.(ts|tsx)',
		'./.storybook/**/*.html',
	],
	theme: {
		// TODO put into a tesseract plugin
		fontFamily: {
			sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
			headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
			mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
			inherit: ['inherit'],
		},
		colors: {
			'sidebar': 'rgb(var(--color-sidebar)',
			'topbar': 'rgb(var(--color-topbar)',

			'shade': 'rgb(var(--color-shade))',
			'negative': 'rgb(var(--color-negative))',
			'positive': 'rgb(var(--color-positive))',
			'primary': 'rgb(var(--color-primary))',
			'secondary': 'rgb(var(--color-secondary))',
			'tertiary': 'rgb(var(--color-tertiary))',
			'code-number': 'rgb(var(--color-code-number))',
			'code-keyword': 'rgb(var(--color-code-keyword))',
			'code-type': 'rgb(var(--color-code-type))',
			'code-instance-attribute': 'rgb(var(--color-code-instance-attribute))',
			'code-function': 'rgb(var(--color-code-function))',
			'code-parameter': 'rgb(var(--color-code-parameter))',
			'code-property': 'rgb(var(--color-code-property))',
			'code-string': 'rgb(var(--color-code-string))',
			'code-variable': 'rgb(var(--color-code-variable))',
			'code-regexp': 'rgb(var(--color-code-regexp))',
			'code-url': 'rgb(var(--color-code-url))',
			'code-global': 'rgb(var(--color-code-global))',
			'current': 'currentcolor',
			'inherit': 'inherit',
			'transparent': 'transparent',
		},
		extend: {
			fontSize: {
				'lg': '1.125em',
				'xl': '1.25em',
				'2xl': '1.5em',
				'3xl': '1.75em',
				'4xl': '2em',
				'5xl': '3em',
				'6xl': '4em',
				'xxs': '0.625rem',
			},
			borderRadius: {
				inherit: 'inherit',
			},
			minWidth: {
				6: '1.5rem',
				10: '2.5rem',
				12: '3rem',
				16: '4rem',
				48: '12rem',
				64: '16rem',
			},
			minHeight: {
				6: '1.5rem',
				10: '2.5rem',
				12: '3rem',
				16: '4rem',
				32: '8rem',
				64: '16rem',
			},
			strokeWidth: {
				3: '3',
			},
		},
	},
	plugins: [
		plugin(radioButtonPlugin),
		plugin(menuSelectPlugin),
		plugin(radioTickBoxPlugin),
		plugin(dropdownSelectPlugin),
		plugin(colorPickerPlugin),
		plugin(menuMultiSelectPlugin),
		plugin(tagInputPlugin),
		plugin(toggleButtonPlugin),
		plugin(toggleSwitchPlugin),
		plugin(toggleTickBoxPlugin),
		plugin(numberSpinnerPlugin),
		plugin(sliderPlugin),
		plugin(dateDropdownPlugin),
		plugin(timeSpinnerPlugin),
	],
};

export default config;