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

import { buttonReset, createVariantFromToken, vars } from '../css';

/*-- Animations --*/

const translateRightX = calc.add(
  '100%',
  vars.components.toast.spaces.viewportPaddingX,
);
const translateLeftX = calc.multiply(translateRightX, -1);

const slideInRight = keyframes({
  from: { transform: `translateX(${translateRightX})` },
  to: { transform: 'translateX(0)' },
});

const slideInLeft = keyframes({
  from: { transform: `translateX(${translateLeftX})` },
  to: { transform: 'translateX(0)' },
});

const swipeOutRight = keyframes({
  from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
  to: { transform: `translateX(${translateRightX})` },
});

const swipeOutLeft = keyframes({
  from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
  to: { transform: `translateX(${translateLeftX})` },
});

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

/*-- Styles --*/

export const toast = recipe({
  base: {
    selectors: {
      '&[data-state="open"]': {
        animationDuration: '150ms',
        animationTimingFunction: 'ease',
      },
      '&[data-state="closed"]': {
        animation: `${hide} 100ms ease-in`,
      },
      '&[data-swipe="end"]': {
        animationDuration: '100ms',
        animationTimingFunction: 'ease-out',
      },
      '&[data-swipe="move"]': {
        transform: 'translateX(var(--radix-toast-swipe-move-x))',
      },
    },
  },

  variants: {
    size: createVariantFromToken(
      vars.components.toast.sizes,
      (_key, value) => ({
        maxWidth: value,
      }),
    ),
    horizontal: {
      left: {
        selectors: {
          '&[data-state="open"]': { animationName: slideInLeft },
          '&[data-swipe="end"]': { animationName: swipeOutLeft },
        },
      },
      right: {
        selectors: {
          '&[data-state="open"]': { animationName: slideInRight },
          '&[data-swipe="end"]': { animationName: swipeOutRight },
        },
      },
    },
    vertical: {
      top: { marginBottom: vars.space['2'] },
      bottom: { marginTop: vars.space['2'] },
    },
  },

  defaultVariants: {
    size: 'md',
  },
});

export const closeButton = style([
  buttonReset,
  {
    marginLeft: vars.space[3],
  },
]);

export const content = style({
  display: 'flex',
  alignItems: 'center',
  fontSize: vars.fontSizes.md,
  fontWeight: vars.fontWeights.bold,
});

export type ToastVariants = NonNullable<RecipeVariants<typeof toast>>;