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

import { vars } from '#/styles/contract.css';
import { layered } from '#/styles/layers';
import { components } from '#/styles/layers.css';
import { fontSize } from '#/styles/tokens.css';

const borderWidth = 1;
const lineHeight = 1.2;
const paddingBlock = 12;

export const maxRowsVar = createVar();

export const root = style(
	layered(components, {
		display: 'flex',
		flexDirection: 'column',
	}),
);

export const label = style({
	display: 'block',
	marginBottom: 8,
});

export const labelRow = style({
	display: 'flex',
	alignItems: 'baseline',
	justifyContent: 'space-between',
	marginBottom: 8,
});

export const input = style(
	layered(components, {
		appearance: 'none',
		boxSizing: 'border-box',
		display: 'block',
		margin: 0,
		outline: 'none',
		border: `${borderWidth}px solid transparent`,
		borderRadius: 10,
		backgroundColor: vars.palette.contrast_50,
		paddingBlock,
		paddingInline: 15,
		width: '100%',
		lineHeight,
		color: vars.palette.contrast_1000,
		fontFamily: 'inherit',
		fontSize: fontSize.md,
		selectors: {
			'&::placeholder': { color: vars.palette.contrast_500 },
			'&:disabled': { opacity: 0.5, cursor: 'default' },
			'&:hover': { borderColor: vars.palette.contrast_100 },
			'&:focus': { borderColor: vars.palette.primary_500, backgroundColor: vars.palette.primary_25 },
		},
	}),
);

export const invalid = style(
	layered(components, {
		borderColor: vars.palette.negative_300,
		backgroundColor: vars.palette.negative_25,
		selectors: {
			'&:hover': { borderColor: vars.palette.negative_500 },
			'&:focus': { borderColor: vars.palette.negative_500, backgroundColor: vars.palette.negative_25 },
		},
	}),
);

export const multiline = style(
	layered(components, {
		fieldSizing: 'content',
		minHeight: 80,
		maxHeight: `calc(${fontSize.md} * ${lineHeight} * ${fallbackVar(maxRowsVar, '9999')} + ${
			paddingBlock * 2 + borderWidth * 2
		}px)`,
		resize: 'none',
		scrollPaddingBlock: paddingBlock,
	}),
);