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

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

const textColor = createVar();
const backgroundColor = createVar();

const appear = keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 },
});

const disappear = keyframes({
  from: { opacity: 1 },
  to: { opacity: 0 },
});

export const content = recipe({
  base: {
    borderRadius: '4px',
    backgroundColor,
    color: textColor,
    fontSize: vars.fontSizes.caption,
    padding: vars.space[2],
    animation: `${appear} 0.2s ease`,
    selectors: {
      '&[data-state="closed"]': {
        animation: `${disappear} 0.2s ease`,
      },
    },
  },

  variants: {
    color: {
      primary: {
        vars: {
          [textColor]: vars.colors['primary-text-strong'],
          [backgroundColor]: vars.colors.primary,
        },
      },
      secondary: {
        vars: {
          [textColor]: vars.colors['secondary-text-strong'],
          [backgroundColor]: vars.colors['secondary-down'],
        },
      },
      base: {
        vars: {
          [textColor]: vars.colors['base-text-strong'],
          [backgroundColor]: vars.colors.base,
        },
      },
    },
    size: {
      sm: {
        maxWidth: '7.5rem', // 120px / 16
      },
      md: {
        maxWidth: '15rem', // 240px / 16
      },
    },
  },

  defaultVariants: {
    color: 'secondary',
    size: 'sm',
  },
});

export const arrow = style({
  fill: backgroundColor,
  width: '14px',
  height: '7px',
});

export type ContentVariants = NonNullable<RecipeVariants<typeof content>>;