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

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

export const input = style({
  opacity: 0,
  width: 0,
  height: 0,
  position: 'absolute',
  zIndex: -1,
});

const generateHoverVariant = (variants: object, styles: object) => ({
  variants,
  style: {
    selectors: {
      '&:hover': styles,
    },
  },
});

export const select = style({
  cursor: 'pointer',
});

export const body = recipe({
  base: [
    focusOutline,
    {
      selectors: {
        [`${input}:focus-visible + &`]: {
          outlineColor: vars.colors['base-text-strong'],
        },
      },
    },
  ],

  variants: {
    disabled: {
      true: {},
    },
    selected: {
      false: {
        selectors: {
          '&&': {
            color: vars.colors['base-text-subtle'],
          },
        },
      },
    },
  },

  compoundVariants: [
    generateHoverVariant(
      { disabled: false, selected: true },
      { backgroundColor: vars.colors['base-down'] },
    ),
    generateHoverVariant(
      { disabled: false, selected: false },
      { color: vars.colors['base-text-weak'] },
    ),
  ],

  defaultVariants: {
    selected: false,
    disabled: false,
  },
});