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

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 } = 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],
      },
      progress: {
        width: `${completed ? 100 : progress}%`,
        transition: 'width 100ms linear',
      },
    }),
    [hidden, completed, progress],
  );

  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]);

  return (
    <Container
      ref={ref}
      styleConfig={{
        root: [progressBarStaticStyles.progressContainer, dynamicStyles.progressContainer],
      }}
    >
      <Container
        styleConfig={{
          root: [progressBarStaticStyles.progressBar, dynamicStyles.progressBar],
        }}
      >
        {!disabled && (
          <Container
            styleConfig={{
              root: [progressBarStaticStyles.progress, dynamicStyles.progress],
            }}
          />
        )}
      </Container>
    </Container>
  );
});

ProgressBar.displayName = 'ProgressBar';

export default ProgressBar;