import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { Animated, View } from "react-native";


type Props = {
   margin?: number
   value: number
   category: "page" | "carousel" | "list"
}

export default function ProgressBar({ margin, value, category }: Props) {
   const { colors } = useTheme();
   const [progress, setProgress] = useState(new Animated.Value(0));
   const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 232 : category == 'page' ? 245 : 290);
   const [componentWidth, setComponentWidth] = useState(0);

   const handleLayout = (event: any) => {
      const { width } = event.nativeEvent.layout;
      setComponentWidth(width);
   };


   useEffect(() => {
      Animated.timing(progress, {
         // carousel:: 100% = 255
         // page:: 100% = 290
         // wrapbar :: 90%
         toValue: value / 100 * componentWidth,
         duration: 1000,
         useNativeDriver: false
      }).start();
   }, [value, componentWidth]);


   return (
      <View style={[Styles.contentItemCenter]}>
         <View style={[Styles.wrapBar, { margin: margin && margin, backgroundColor: colors.icon + '30' }]} onLayout={handleLayout}>
            <Animated.View style={[Styles.contentBar, { width: progress }]} />
         </View>
      </View>
   )
}