import React from 'react';
import { Animated, Platform } from 'react-native';
import { useAnimatedValueArray } from '../../utils';

const useInitHighlightedAnimation = ({
  selectedIndex = 0,
  tabsLength,
  variant,
}: {
  selectedIndex?: number;
  tabsLength: number;
  variant: 'underlined' | 'highlighted';
}) => {
  const tabsAnims = useAnimatedValueArray(
    Array.from({ length: tabsLength }).map((_, i) =>
      i === selectedIndex ? 1 : 0
    )
  );

  React.useEffect(() => {
    if (variant !== 'highlighted') {
      return;
    }

    const animation = Animated.parallel([
      ...Array.from({ length: tabsLength }).map((_, i) =>
        Animated.timing(tabsAnims[i], {
          toValue: i === selectedIndex ? 1 : 0,
          duration: 150,
          useNativeDriver: Platform.OS !== 'web',
        })
      ),
    ]);

    animation.start();

    return () => {
      animation.stop();
    };
  }, [selectedIndex]);

  return { tabsAnims };
};

export default useInitHighlightedAnimation;