import * as React from 'react';
import { Animated, Easing } from 'react-native';

import { SpinAnimationProps } from './spin-animation.props';
import { loadingIconStyles as styles } from './spin-animation.styles';
/**
 * Spinning loading icon
 * @param children Element to animate
 * @param style An optional style override useful for padding & margin.
 */
export function SpinAnimation(props: SpinAnimationProps) {
  // grab the props
  const { width, height, style, children, ...rest } = props;

  const spinValue = new Animated.Value(0);

  Animated.loop(
    Animated.timing(spinValue, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
      useNativeDriver: true,
    }),
  ).start();

  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  const wrapperStyle = [
    styles.wrapper,
    { transform: [{ rotate: spin }] },
    { width, height },
    style,
  ];

  return (
    <Animated.View style={wrapperStyle} {...rest}>
      {children}
    </Animated.View>
  );
}
