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

const VbeSkeleton = ({
  style,
  color="rgba(0, 10, 20, 0.1)",
  layout=[],
  widthList=["100%"],
  height=16,
  margin={},
  borderRadius=8,
  animate=true,
  isLoading=true,
  children
}) => {
  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 (isLoading) {
    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>
      );
    }
  } else if (children) {
    return children;
  }
};

export default VbeSkeleton;