import React, { forwardRef, useEffect, useRef, useState } from 'react';

import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import { Container, ContainerRef } from '@cleartrip/ct-design-container';
import { useStyles } from '@cleartrip/ct-design-style-manager';

import { IProgressBar } from './type';
import { progressBarStaticStyles } from './style';

const ProgressBar = forwardRef<ContainerRef, IProgressBar>((props, ref) => {
  const { duration, resetProgress, hidden, completed, disabled, testID } = props;
  const [progress, setProgress] = useState<number>(0);

  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const dynamicStyles = useStyles(
    (theme) => ({
      progressContainer: {
        zIndex: hidden ? 0 : 3000,
      },
      progressBar: {
        height: hidden ? theme.spacing[0] : theme.spacing[0.5],
      },
    }),
    [hidden],
  );

  useEffect(() => {
    if (completed || disabled) return;

    let startTime = Date.now();
    if (resetProgress && intervalRef.current) {
      startTime = Date.now();
      clearInterval(intervalRef.current);
    }

    intervalRef.current = setInterval(() => {
      const now = Date.now();
      const elapsedTime = now - startTime;
      const currentProgress = (elapsedTime / duration) * 100;

      if (currentProgress <= 100) {
        setProgress(currentProgress);
      } else if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    }, 10);

    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, [duration, resetProgress, completed, disabled]);

  const progressWidth = useSharedValue(0);

  useEffect(() => {
    progressWidth.value = completed ? 100 : progress;
  }, [completed, progress, progressWidth]);

  const animatedProgressStyle = useAnimatedStyle(() => ({
    width: `${progressWidth.value}%`,
  }));

  return (
    <Container
      ref={ref}
      testID={testID ? `${testID}-ProgressBar` : undefined}
      styleConfig={{
        root: [progressBarStaticStyles.progressContainer, dynamicStyles.progressContainer],
      }}
    >
      <Container
        styleConfig={{
          root: [progressBarStaticStyles.progressBar, dynamicStyles.progressBar],
        }}
      >
        {!disabled && <Animated.View style={[progressBarStaticStyles.progress, animatedProgressStyle]} />}
      </Container>
    </Container>
  );
});

ProgressBar.displayName = 'ProgressBar';

export default ProgressBar;