import { keyframes } from '@emotion/react';

import { type AnimatedIconProps } from './types';

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
`;

const rotateBack = keyframes`
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
`;

export const shouldForwardProp = (prop: string) =>
  prop !== 'isCollapsed' && prop !== 'animationDisabled';

export const getAnimation = ({ isCollapsed }: AnimatedIconProps) =>
  isCollapsed ? rotateBack : rotate;

export const getRotate = ({ animationDisabled }: AnimatedIconProps) =>
  animationDisabled && '180deg';

export const getAnimationState = ({ animationDisabled }: AnimatedIconProps) =>
  animationDisabled ? 'paused' : 'running';
