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

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

const dropdownMenuVars = vars.components.dropdownMenu;

const arrowSizeHalf = calc.divide(dropdownMenuVars.sizes.arrow, 2);

export const items = recipe({
  base: {
    display: 'none',
    zIndex: dropdownMenuVars.zIndices.base,
  },

  variants: {
    open: {
      true: {
        display: 'flex',
      },
    },
    withArrow: {
      true: {
        selectors: {
          '&[data-popover-placement^="top"]': {
            marginTop: calc.multiply(arrowSizeHalf, -1),
          },
          '&[data-popover-placement^="bottom"]': {
            marginTop: arrowSizeHalf,
          },
          '&[data-popover-placement^="right"]': {
            marginLeft: arrowSizeHalf,
          },
          '&[data-popover-placement^="left"]': {
            marginRight: calc.multiply(arrowSizeHalf, -1),
          },
        },
      },
    },
  },
});

export const arrow = style({
  position: 'absolute',
  width: dropdownMenuVars.sizes.arrow,
  height: dropdownMenuVars.sizes.arrow,
  background: 'inherit',
  border: 'inherit',
  borderColor: 'transparent',

  selectors: {
    '*[data-popover-placement^="top"] > &': {
      bottom: calc.multiply(arrowSizeHalf, -1),

      borderBottomColor: 'inherit',
      borderRightColor: 'inherit',
    },
    '*[data-popover-placement^="bottom"] > &': {
      top: calc.multiply(arrowSizeHalf, -1),

      borderTopColor: 'inherit',
      borderLeftColor: 'inherit',
    },
    '*[data-popover-placement^="right"] > &': {
      left: calc.multiply(arrowSizeHalf, -1),

      borderBottomColor: 'inherit',
      borderLeftColor: 'inherit',
    },
    '*[data-popover-placement^="left"] > &': {
      right: calc.multiply(arrowSizeHalf, -1),

      borderTopColor: 'inherit',
      borderRightColor: 'inherit',
    },
  },
});