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

const VbeSkeleton = ({
  style,
  color="rgba(0, 10, 20, 0.05)",
  layout=[],
  widthList=["100%"],
  height=16,
  margin={},
  borderRadius=8,
  animate=true
}) => {
  const opacity = useRef(new Animated.Value(1)).current;
  useEffect(() => {
    if (animate) {
      startScanAnimate()
    }
  }, [animate])

  const startScanAnimate = () => {
    Animated.timing(opacity, {
      toValue: 0.1,
      duration: 1000,
      easing: Easing.linear,
      useNativeDriver: true
    }).start(() => {
      if (animate) {
        endScanAnimate();
      }
    });
  }

  const endScanAnimate = () => {
    Animated.timing(opacity, {
      delay: 200,
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
      useNativeDriver: true
    }).start(() => {
      if (animate) {
        startScanAnimate();
      }
    });
  }
  
  if (layout.length > 0) {
    return (
      <Animated.View style={[style, {opacity}]}>
        { layout.map((item, index) =>
          <View key={index} style={{height, borderRadius: borderRadius, backgroundColor: color, ...item}}>
            
          </View>
        )}
      </Animated.View>
    )
  } else {
    return (
      <Animated.View style={[style, {opacity}]}>
        { widthList.map((item, index) => 
          <View key={index} style={{width: item, height, ...margin, borderRadius: borderRadius, backgroundColor: color ?? VbeTheme.getSkeletonColor()}}>
            
          </View>
        )}
      </Animated.View>
    );
  }
};

export default VbeSkeleton;