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

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

const fontSizeVar = createVar();
const leadingVar = createVar();

export const paddingTopVar = createVar();
export const paddingBottomVar = createVar();
export const paddingLeftVar = createVar();
export const paddingRightVar = createVar();
export const minRowsVar = createVar();
export const maxRowsVar = createVar();

const fontSizeValue = fallbackVar(fontSizeVar, fontSize.lg);
const leadingValue = fallbackVar(leadingVar, String(fontLeading.lg));

const lineHeightValue = roundToPx(`calc(${fontSizeValue} * ${leadingValue})`);

const rowsHeight = (rows: string) =>
	`calc(${lineHeightValue} * ${rows} + ${paddingTopVar} + ${paddingBottomVar})`;

const textMetrics = style({
	lineHeight: lineHeightValue,
	letterSpacing: 'normal',
	whiteSpace: 'pre-wrap',
	wordBreak: 'break-word',
	fontFamily: 'inherit',
	fontSize: fontSizeValue,
});

const padding = style({
	paddingTop: paddingTopVar,
	paddingRight: paddingRightVar,
	paddingBottom: paddingBottomVar,
	paddingLeft: paddingLeftVar,
});

export const root = recipe(
	{
		base: {
			position: 'relative',
			zIndex: 0,
		},
		defaultVariants: {
			fontSize: 'lg',
		},
		variants: {
			fontSize: {
				lg: { vars: { [fontSizeVar]: fontSize.lg, [leadingVar]: String(fontLeading.lg) } },
				md: { vars: { [fontSizeVar]: fontSize.md, [leadingVar]: String(fontLeading.md) } },
			},
		},
	},
	{ debugId: 'root' },
);

export const capped = style({
	maxHeight: rowsHeight(maxRowsVar),
	overflowY: 'auto',
	scrollPaddingTop: paddingTopVar,
	scrollPaddingBottom: paddingBottomVar,
	scrollbarWidth: 'thin',
	scrollbarColor: `${vars.palette.contrast_200} transparent`,
});

export const overlay = style([
	textMetrics,
	padding,
	{
		position: 'absolute',
		top: 0,
		right: 0,
		left: 0,
		zIndex: 10,
		color: vars.palette.contrast_1000,
		pointerEvents: 'none',
	},
]);

export const facet = style({
	color: vars.text.link,
});

export const textarea = style([
	textMetrics,
	padding,
	{
		appearance: 'none',
		boxSizing: 'border-box',
		display: 'block',
		position: 'relative',
		zIndex: 20,
		margin: 0,
		outline: 'none',
		border: 0,
		background: 'transparent',
		fieldSizing: 'content',
		width: '100%',
		minHeight: rowsHeight(minRowsVar),
		overflowY: 'hidden',
		resize: 'none',
		color: 'transparent',
		caretColor: vars.palette.contrast_1000,
		selectors: {
			'&::placeholder': { opacity: 1, color: vars.palette.contrast_500 },
		},
	},
]);