Progress button

"use client"

import * as React from "react"
import { ProgressButton, type ProgressButtonFile, type ProgressButtonState } from "@/components/candor/ui/progress-button"
import { Button } from "@/components/candor/ui/button"

/*
 * The uploads here stand in for your own: each file's progress is what the upload reports, a step at a time, and the
 * button fills only that far. The last file fails, and the button names it.
 */
const start: ProgressButtonFile[] = [
  { id: "a", name: "q3-report.pdf", progress: 0, status: "running" },
  { id: "b", name: "board-notes.docx", progress: 0, status: "running" },
  { id: "c", name: "forecast.xlsx", progress: 0, status: "running" },
]

export default function Example() {
  const [state, setState] = React.useState<ProgressButtonState>("idle")
  const [files, setFiles] = React.useState<ProgressButtonFile[]>(start)
  const timer = React.useRef<ReturnType<typeof setInterval> | undefined>(undefined)
  React.useEffect(() => () => clearInterval(timer.current), [])
  const upload = () => {
    setState("working")
    setFiles(start)
    let tick = 0
    timer.current = setInterval(() => {
      tick += 1
      setFiles((was) =>
        was.map((f, i) => {
          if (f.status !== "running") return f
          const progress = Math.min(1, tick * (0.12 + i * 0.05))
          if (i === 2 && progress >= 0.6) return { ...f, progress, status: "failed" }
          return { ...f, progress, status: progress >= 1 ? "succeeded" : "running" }
        })
      )
      if (tick >= 9) {
        clearInterval(timer.current)
        setState("failed")
      }
    }, 400)
  }
  const overall = files.reduce((sum, f) => sum + (f.progress ?? 0), 0) / files.length
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ProgressButton
        state={state}
        progress={overall}
        files={state === "idle" ? undefined : files}
        labels={{ idle: "Upload 3 files", working: "Uploading…", done: "Uploaded", failed: "Couldn't upload every file" }}
        onClick={upload}
      />
      <ProgressButton state="working" progress={null} labels={{ idle: "Sync", working: "Syncing…", done: "Synced" }} variant="outline" />
      {state !== "idle" && state !== "working" && (
        <Button variant="ghost" size="sm" onClick={() => setState("idle")}>
          Reset the example
        </Button>
      )}
    </div>
  )
}