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

import { colorMix } from '#/styles/color-mix';
import { colors } from '#/styles/colors';
import { recipe } from '#/styles/recipe';
import { space, zIndex } from '#/styles/tokens.css';

const DIALOG_PADDING = space.lg;
const ROW_BLOCK_PADDING = space.md;
const SEARCH_HEIGHT = 42;
const SEARCH_NEGATIVE_MARGIN = SEARCH_HEIGHT + (DIALOG_PADDING - ROW_BLOCK_PADDING - 1);

export const popup = style({
	maxWidth: 500,
	height: 600,
});

export const group = style({
	display: 'contents',
});

export const header = style({
	boxSizing: 'border-box',
	display: 'flex',
	flexShrink: 0,
	alignItems: 'center',
	justifyContent: 'space-between',
	backgroundColor: colors.bg,
	paddingTop: DIALOG_PADDING,
	paddingBottom: space.md,
	paddingInline: DIALOG_PADDING,
});

export const title = style({
	display: 'flex',
	minWidth: 0,
});

export const closeButton = style({
	margin: -space.sm,
});

export const search = style({
	zIndex: zIndex.raised,
	marginBottom: -SEARCH_NEGATIVE_MARGIN,
	backgroundImage: `linear-gradient(${colors.bg} 50%, ${colorMix(colors.bg, '0%')})`,
	paddingBottom: DIALOG_PADDING - ROW_BLOCK_PADDING,
	paddingInline: DIALOG_PADDING,
});

export const list = style({
	paddingTop: SEARCH_NEGATIVE_MARGIN,
	paddingBottom: DIALOG_PADDING - ROW_BLOCK_PADDING,
	scrollPaddingTop: SEARCH_NEGATIVE_MARGIN + (DIALOG_PADDING - ROW_BLOCK_PADDING),
	scrollPaddingBottom: DIALOG_PADDING - ROW_BLOCK_PADDING,
});

export const sectionHeader = recipe(
	{
		base: {
			display: 'block',
			paddingBottom: space.xs,
			paddingInline: DIALOG_PADDING,
		},
		variants: {
			topPadded: {
				true: {
					paddingTop: space._2xl,
				},
				false: {
					paddingTop: ROW_BLOCK_PADDING,
				},
			},
		},
	},
	{ debugId: 'sectionHeader' },
);

export const item = style({
	boxSizing: 'border-box',
	outlineOffset: -2,
	paddingBlock: ROW_BLOCK_PADDING,
	paddingInline: DIALOG_PADDING,
	width: '100%',
	selectors: {
		'&:hover:not([data-disabled])': { backgroundColor: colors.contrast_25 },
	},
});

export const itemBorder = style({
	position: 'relative',
	'::after': {
		position: 'absolute',
		right: DIALOG_PADDING,
		bottom: 0,
		left: DIALOG_PADDING,
		borderBottom: `1px solid ${colors.borderContrastLow}`,
		content: '""',
	},
});

export const itemLabel = style({
	flex: 1,
	minWidth: 0,
	selectors: {
		'[data-disabled] &': { color: colors.textContrastLow },
	},
});

export const empty = style({
	display: 'flex',
	flexDirection: 'column',
	gap: space.md,
	alignItems: 'center',
	paddingBlock: space.xl,
	paddingInline: DIALOG_PADDING,
});

export const emptyMessage = style({
	fontStyle: 'italic',
});

export const doneButton = style({
	width: '100%',
});

export const error = style({
	display: 'flex',
	flexDirection: 'column',
	gap: space.md,
	padding: space.xl,
});