import React, { useEffect, useRef } from "react";
import { Animated } from "react-native";
import { Container } from "./style";
import { keysTheme, theme } from "data/dataMx";

export interface IProgressBarProps {
  /** Background color for process bar */
  background?: keysTheme;
  /** Background color for process percentage */
  colorPoints?: keysTheme;
  /** Percentage displayed on the progress bar from 0 to 100 */
  percentage: number;
  /** Progress bar height */
  height?: string;
}

export const AtomProgressBar = ({
  background = "neutral300",
  colorPoints = "quaternary500",
  percentage,
  height = "10px",
}: IProgressBarProps) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    const animated = Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: false,
    });

    animated.start();

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

  return (
    <Container background={theme[background]} height={height}>
      <Animated.View
        style={{
          borderRadius: 4,
          width: fadeAnim.interpolate({
            inputRange: [0, 1],
            outputRange: ["0%", `${percentage}%`],
          }),
          backgroundColor: theme[colorPoints],
          position: "absolute",
          left: 0,
          top: 0,
          bottom: 0,
          right: 0,
        }}
      />
    </Container>
  );
};
