"use client"

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

import { cn } from "../../lib/utils"

/**
 * `ProgressBar` is the replacement for `@wordpress/components`' `ProgressBar` -
 * **5 imports across 5 files**.
 *
 * ALL FIVE SITES RENDER IT WITH NO `value`, WHICH IN WORDPRESS MEANS INDETERMINATE: a half-width bar
 * that slides across the track for as long as a fetch is running. That mode is the whole component
 * here, and getting it wrong is invisible rather than loud - a bar that renders but never moves still
 * looks like a bar.
 *
 * WHY THIS DOES NOT SIMPLY WRAP `ui/progress`, which is the other Radix Progress in the kit: that
 * component positions its indicator with `translateX(-(100 - value)%)`, so with no value it sits at
 * -100% and is invisible. It stays the determinate bar; this one owns the sliding case. The track and
 * indicator colours are taken from it so the two read as one control.
 *
 * Height is 2px, which is what the `.wp-progress-bar` class the call sites already carry applies. So
 * when that WordPress-era class is dropped, nothing moves.
 *
 * The sliding keyframe is `animate-progress-indeterminate`, registered in `tailwind.config.js` -
 * Tailwind v3 generates no such utility on its own, and a missing animation here is silent.
 */

export interface ProgressBarProps
  extends Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, "value" | "children"> {
  /** 0-100. Omitted means indeterminate, which is what every current call site relies on. */
  value?: number
}

function ProgressBar({ className, value, ...props }: ProgressBarProps) {
  const isIndeterminate = !Number.isFinite(value)

  return (
    <ProgressPrimitive.Root
      data-slot="progress-bar"
      // WordPress labels its native progress element "Loading". Without a name a screen reader
      // announces an unnamed progressbar, which says nothing about what is busy.
      aria-label="Loading"
      value={isIndeterminate ? null : value}
      className={cn(
        "bg-muted relative h-0.5 w-full overflow-hidden rounded-full",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-bar-indicator"
        className={cn(
          "bg-primary absolute top-0 h-full rounded-full",
          isIndeterminate
            ? "animate-progress-indeterminate w-1/2"
            : "left-0 transition-[width] duration-300"
        )}
        // runtime-style: a determinate bar's width is a percentage that arrives from data, so no
        // stylesheet can know it. The indeterminate bar carries no inline style at all.
        style={isIndeterminate ? undefined : { width: `${value}%` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { ProgressBar }