import React, {useEffect} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

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

export function ImageSkeleton({style}: Props) {
  const opacity = useSharedValue(0.7);

  useEffect(() => {
    opacity.value = withRepeat(withTiming(0.9, {duration: 800}), -1, true);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      backgroundColor: interpolateColor(
        opacity.value,
        [0, 1],
        [COLORS.GRAY, COLORS.GRAY_TWO],
      ),
    };
  });

  return <Animated.View style={[styles.square, style, animatedStyle]} />;
}
