import React, {memo, useEffect, useMemo} from 'react';
import {ImageStyle, StyleProp, ViewStyle} from 'react-native';
import Animated, {
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';
import {useTheme} from '@shared/theme';

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

function ImageSkComponent({style}: Props) {
  const {theme} = useTheme();
  const opacity = useSharedValue(0.7);

  useEffect(() => {
    opacity.value = withRepeat(withTiming(0.9, {duration: 800}), -1, true);
    return () => {
      cancelAnimation(opacity);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    if (!_WORKLET) {
      return {opacity: 0.7};
    }
    return {
      opacity: opacity.value,
    };
  });

  const containerStyle = useMemo(() => {
    return [
      style,
      {backgroundColor: theme.background.elements.brand},
      animatedStyle,
    ] as StyleProp<ViewStyle>;
  }, [style, animatedStyle, theme.background.elements.brand]);

  return <Animated.View style={containerStyle} />;
}
export const ImageSk = memo(ImageSkComponent);
