export const ANIMATIONS = {
  FADE: "fade",
};

const DIRECTIONS = {
  UP: "up",
  DOWN: "down",
  LEFT: "left",
  RIGHT: "right",
};

const TRANSLATE_BY = 10;

export const entryStyles = {
  [ANIMATIONS.FADE]: {
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.UP}`]: {
    transform: `translateY(${TRANSLATE_BY}px)`,
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.DOWN}`]: {
    transform: `translateY(-${TRANSLATE_BY}px)`,
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.LEFT}`]: {
    transform: `translateX(${TRANSLATE_BY}px)`,
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.RIGHT}`]: {
    transform: `translateX(-${TRANSLATE_BY}px)`,
    opacity: 0,
  },
};

export const exitStyles = {
  [ANIMATIONS.FADE]: {
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.UP}`]: {
    transform: `translateY(-${TRANSLATE_BY}px)`,
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.DOWN}`]: {
    transform: `translateY(${TRANSLATE_BY}px)`,
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.LEFT}`]: {
    transform: `translateX(-${TRANSLATE_BY}px)`,
    opacity: 0,
  },
  [`${ANIMATIONS.FADE}-${DIRECTIONS.RIGHT}`]: {
    transform: `translateX(${TRANSLATE_BY}px)`,
    opacity: 0,
  },
};

export const activeStyle = {
  transform: "translate(0px)",
  opacity: 1,
};
