import React, {ReactNode, useEffect} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {
  useSharedValue,
  withDelay,
  withRepeat,
  withSequence,
  withTiming,
} from 'react-native-reanimated';

import {AnimatedValueContext} from '../../contexts/useAnimatedValueContext';

interface Props {
  style?: StyleProp<ViewStyle>;
  children: ReactNode;
}

function SkeletonProvider({style, children}: Props) {
  const animatedValue = useSharedValue(0);

  useEffect(() => {
    animatedValue.value = withRepeat(
      withDelay(
        500,
        withSequence(
          withTiming(1, {duration: 1200}),
          withTiming(0, {duration: 0}),
        ),
      ),
      -1,
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <AnimatedValueContext.Provider value={animatedValue}>
      <View style={style}>{children}</View>
    </AnimatedValueContext.Provider>
  );
}
export default SkeletonProvider;
