'use client';

import * as React from 'react';
import * as ProgressPrimitive from '@radix-ui/react-progress';

import { cn } from '@spoon/ui';

type BasedProgressProps = React.ComponentProps<
  typeof ProgressPrimitive.Root
> & {
  /** how many ms between updates */
  intervalMs?: number;
  /** fraction of the remaining distance to add each tick */
  alpha?: number;
};

const BasedProgress = ({
  intervalMs = 50,
  alpha = 0.1,
  className,
  value = 0,
  ...props
}: BasedProgressProps) => {
  const [progress, setProgress] = React.useState<number>(value ?? 0);

  React.useEffect(() => {
    const id = window.setInterval(() => {
      setProgress((prev) => {
        const next = prev + (100 - prev) * alpha;
        return Math.min(100, Math.round(next * 10) / 10);
      });
    }, intervalMs);
    return () => window.clearInterval(id);
  }, [intervalMs, alpha]);

  return (
    <ProgressPrimitive.Root
      data-slot='progress'
      className={cn(
        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
        className,
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot='progress-indicator'
        className='bg-primary h-full w-full flex-1 transition-all'
        style={{ transform: `translateX(-${100 - progress}%)` }}
      />
    </ProgressPrimitive.Root>
  );
};

export { BasedProgress };