import { createVar, style } from '@vanilla-extract/css';
import { calc } from '@vanilla-extract/css-utils';
import { recipe } from '@vanilla-extract/recipes';

import { focusOutline, vars } from '../css';

const MAX_VISIBLE_OPTIONS = 6;

export const container = style({
  position: 'relative',
});

const borderWidthVar = createVar();

export const options = style([
  focusOutline,
  {
    vars: {
      [borderWidthVar]: '1px',
    },

    position: 'absolute',
    maxHeight: calc.add(
      calc.multiply(
        vars.components.select.sizes['option-height'],
        MAX_VISIBLE_OPTIONS,
      ),
      calc.multiply(borderWidthVar, 2),
    ),
    width: '100%',
    marginTop: vars.space[1],
    zIndex: 1,

    backgroundColor: vars.colors.base,
    border: `${borderWidthVar} solid currentColor`,
    color: vars.colors['base-text-strong'],

    fontSize: vars.fontSizes.body1,
  },
]);

export const option = recipe({
  base: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    padding: vars.space[2],
    minHeight: vars.components.select.sizes['option-height'],

    userSelect: 'none',
    transition: 'all 0.2s',
    outline: 'none',

    selectors: {
      '&[aria-selected="true"]': {
        fontWeight: vars.fontWeights.bold,
      },
    },
  },

  variants: {
    active: {
      true: {
        backgroundColor: vars.colors['base-up'],
      },
    },
  },
});

export const separator = style({
  border: 'none',
  height: 0,

  '::before': {
    position: 'absolute',
    content: '',
    display: 'block',
    width: '100%',
    border: '0 solid currentColor',
    borderTopWidth: '1px',
  },
});