import React, { FC, useContext, useEffect, useRef } from 'react';
import { Animated, View } from 'react-native';
import styles from './styles';
import { ProgressBarProps } from './types';
import { ApplicationContext } from '../Context';
import { Radius } from '../Consts';

const ProgressBar: FC<ProgressBarProps> = ({ percent = 0, style }) => {
  const { theme } = useContext(ApplicationContext);
  const animation = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(animation, {
      toValue: percent,
      duration: 200,
      useNativeDriver: false,
    }).start();
  }, [percent, animation]);

  const width = animation.interpolate({
    inputRange: [0, 100],
    outputRange: ['0%', '100%'],
  });

  return (
    <View
      style={[
        style,
        styles.progressContainer,
        { backgroundColor: theme.colors.background.default },
      ]}
    >
      <Animated.View
        style={{
          height: 4,
          borderRadius: Radius.XXS,
          width,
          backgroundColor: theme.colors.primary,
        }}
      />
    </View>
  );
};

export default ProgressBar;