import { useEffect, useMemo, useState } from 'react';
import { Animated } from 'react-native';
import { useWidgetRewards } from './useWidgetRewards';

export type UseWidgetRewardsEffectArg = {
  widgetId: string;
};

export const useWidgetRewardsEffect = ({
  widgetId,
}: UseWidgetRewardsEffectArg) => {
  const widgetRewards = useWidgetRewards({ widgetId });
  const [posYs, setPosys] = useState([]);

  useEffect(() => {
    if (widgetRewards && widgetRewards?.length > 1) {
      const animations = [];
      const posYs = widgetRewards.map(() => {
        const posY = new Animated.Value(0);
        const rewardAnimation = Animated.timing(posY, {
          toValue: 10,
          duration: 2000,
          useNativeDriver: true,
        });
        animations.push(rewardAnimation);
        return posY;
      });
      const rewardAnimation = Animated.loop(Animated.sequence(animations));
      rewardAnimation.start();
      setPosys(posYs);
      return () => {
        rewardAnimation.reset();
      };
    }
  }, [widgetRewards]);

  const slideInOutStyles = useMemo(() => {
    if (
      !widgetRewards?.length ||
      !posYs.length ||
      widgetRewards.length !== posYs.length
    ) {
      return [];
    }
    return widgetRewards.map((reward, i) => {
      return {
        translateY: posYs[i].interpolate({
          inputRange: [0, 1, 9, 10],
          outputRange: [20, 0, 0, -20],
        }),
      };
    });
  }, [posYs, widgetRewards?.length]);

  return { slideInOutStyles };
};