import { createVar, fallbackVar, style } from '@vanilla-extract/css';

import { typedKeys } from '#/lib/utils/objects';

import { vars } from '#/styles/contract.css';
import { recipe } from '#/styles/recipe';
import { roundToPx } from '#/styles/round';
import { borderRadius, fontLeading, fontSize, space } from '#/styles/tokens.css';

const fontSizeVar = createVar();
const lineHeightVar = createVar();

export const widthVar = createVar();

export const boxSizeVar = createVar();

export const pillWidthVar = createVar();

export const squareRadiusVar = createVar();

const sizeVariants = (): { [K in keyof typeof fontLeading]: { vars: Record<string, string> } } => {
	const out: Record<string, { vars: Record<string, string> }> = {};
	for (const key of typedKeys(fontLeading)) {
		out[key] = {
			vars: {
				[fontSizeVar]: fontSize[key],
				[lineHeightVar]: roundToPx(`calc(${fontSize[key]} * ${fontLeading[key]})`),
			},
		};
	}
	// oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the loop writes one entry per `fontLeading` key
	return out as { [K in keyof typeof fontLeading]: { vars: Record<string, string> } };
};

export const text = recipe(
	{
		base: {
			display: 'flex',
			flexShrink: 0,
			alignItems: 'center',
			width: fallbackVar(widthVar, 'auto'),
			maxWidth: '100%',
			height: lineHeightVar,
		},
		defaultVariants: { color: 'contrast_50', size: 'md' },
		variants: {
			color: {
				contrast_25: { color: vars.palette.contrast_25 },
				contrast_50: { color: vars.palette.contrast_50 },
				contrast_100: { color: vars.palette.contrast_100 },
			},
			size: sizeVariants(),
		},
	},
	{ debugId: 'text' },
);

export const bar = style({
	borderRadius: borderRadius.md,
	backgroundColor: 'currentColor',
	width: '100%',
	height: roundToPx(fontSizeVar),
});

export const circle = recipe(
	{
		base: {
			display: 'flex',
			flexShrink: 0,
			alignItems: 'center',
			justifyContent: 'center',
			borderRadius: '50%',
			backgroundColor: 'currentColor',
			width: boxSizeVar,
			height: boxSizeVar,
		},
		defaultVariants: { color: 'contrast_50' },
		variants: {
			blend: { true: { opacity: 0.6 } },
			color: {
				contrast_25: { color: vars.palette.contrast_25 },
				contrast_50: { color: vars.palette.contrast_50 },
				contrast_100: { color: vars.palette.contrast_100 },
			},
		},
	},
	{ debugId: 'circle' },
);

export const pill = recipe(
	{
		base: {
			flexShrink: 0,
			borderRadius: borderRadius.full,
			backgroundColor: 'currentColor',
			width: pillWidthVar,
			height: boxSizeVar,
		},
		defaultVariants: { color: 'contrast_50' },
		variants: {
			blend: { true: { opacity: 0.6 } },
			color: {
				contrast_25: { color: vars.palette.contrast_25 },
				contrast_50: { color: vars.palette.contrast_50 },
				contrast_100: { color: vars.palette.contrast_100 },
			},
		},
	},
	{ debugId: 'pill' },
);

export const square = recipe(
	{
		base: {
			flexShrink: 0,
			borderRadius: squareRadiusVar,
			backgroundColor: 'currentColor',
			width: boxSizeVar,
			height: boxSizeVar,
		},
		defaultVariants: { color: 'contrast_50' },
		variants: {
			color: {
				contrast_25: { color: vars.palette.contrast_25 },
				contrast_50: { color: vars.palette.contrast_50 },
				contrast_100: { color: vars.palette.contrast_100 },
			},
		},
	},
	{ debugId: 'square' },
);

export const row = recipe(
	{
		base: {
			display: 'flex',
			flexDirection: 'row',
		},
		variants: {
			align: {
				center: { alignItems: 'center' },
				start: { alignItems: 'flex-start' },
			},
			gap: {
				md: { gap: space.md },
				sm: { gap: space.sm },
				xs: { gap: space.xs },
			},
		},
	},
	{ debugId: 'row' },
);

export const col = recipe(
	{
		base: {
			display: 'flex',
			flexDirection: 'column',
			minWidth: 0,
		},
		variants: {
			gap: {
				md: { gap: space.md },
				sm: { gap: space.sm },
				xs: { gap: space.xs },
			},
			grow: {
				true: { flex: 1 },
			},
		},
	},
	{ debugId: 'col' },
);