import React, { useEffect } from 'react';
import { View, StyleSheet, Animated, Easing } from 'react-native';

export const Loader = ({}:any) => {
  const flipAnim = new Animated.Value(0);
  const spinAnim = new Animated.Value(0);

  useEffect(() => {
    startFlipAnimation();
    startSpinAnimation();
  }, []);

  const startFlipAnimation = () => {
    Animated.loop(
      Animated.timing(flipAnim, {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
  };

  const startSpinAnimation = () => {
    Animated.loop(
      Animated.timing(spinAnim, {
        toValue: 1,
        duration: 1000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
  };

  const flip = flipAnim.interpolate({
    inputRange: [0, 0.49, 0.5, 1],
    outputRange: [1, 1, -1, -1],
  });

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

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.loader, { transform: [{ scaleX: flip }] }]}>
        <Animated.View
          style={[
            styles.rotatingBall,
            { transform: [{ rotate: spin }, { translateX: -24 }] },
          ]}
        />
        <View style={styles.centerCircle} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffff',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 999,
  },
  loader: {
    width: 100 - 24,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rotatingBall: {
    position: 'absolute',
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#572364',
    zIndex: 999,
  },
  centerCircle: {
    position: 'absolute',
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#2FD9A9',
  },
});