import * as React from 'react';
import * as Animatable from 'react-native-animatable';

import { Props } from './fade-animation.props';

/**
 * Fade animation component
 *
 * @property animation Animation type (fadeIn|fadeOut)
 * @property children Component to animate
 * @property duration Duration of the animation.
 * @property delay Delay of the animation.
 * @property onAnimationEnd Callback executed when the animation ends
 */
export const FadeAnimation: React.FC<Props> = (props) => {
  // grab the props
  const { animation, children, duration, delay, style, onAnimationEnd, ...rest } = props;

  return (
    <Animatable.View
      animation={animation}
      delay={delay}
      duration={duration}
      style={style}
      onAnimationEnd={onAnimationEnd}
      {...rest}
    >
      {children}
    </Animatable.View>
  );
};

FadeAnimation.defaultProps = {
  delay: 0,
  onAnimationEnd: () => null,
};
