/*! Strand UI | MIT License | dillingerstaffing.com */

import type { JSX } from "preact";
import { forwardRef } from "preact/compat";
import { cx } from "../../internal/index.js";

export interface ProgressProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "size" | "label"> {
  variant?: "bar" | "ring";
  /** Percent complete, 0 to 100; omit for indeterminate. */
  value?: number;
  size?: "sm" | "md" | "lg";
  /** Accessible name: what is progressing. */
  label?: string;
  /** Read in place of the percentage, such as "3 of 10 steps". */
  valueText?: string;
}

const RING_SIZES: Record<string, number> = { sm: 24, md: 40, lg: 56 };
const RING_STROKE = 3;

/**
 * Determinate or indeterminate progress, as a bar or a ring.
 *
 * @example
 * <Progress variant="ring" value={65} size="lg" />
 */
export const Progress = forwardRef<HTMLDivElement, ProgressProps>(({ variant = "bar", value, size = "md", label, valueText, className = "", ...rest }, ref) => {
  const isDeterminate = value != null;
  const classes = cx("strand-progress", `strand-progress--${variant}`, `strand-progress--${size}`, !isDeterminate && "strand-progress--indeterminate", className);
  const aria: Record<string, string | number | undefined> = {
    role: "progressbar",
    "aria-valuemin": 0,
    "aria-valuemax": 100,
    "aria-valuenow": isDeterminate ? value : undefined,
    "aria-valuetext": valueText,
    "aria-label": label,
  };
  if (variant === "ring") {
    const dim = RING_SIZES[size] ?? RING_SIZES.md;
    const radius = (dim - RING_STROKE) / 2;
    const circumference = 2 * Math.PI * radius;
    const offset = isDeterminate ? circumference - (circumference * (value as number)) / 100 : 0;
    return (
      <div ref={ref} className={classes} {...aria} {...rest}>
        <svg width={dim} height={dim} viewBox={`0 0 ${dim} ${dim}`} className="strand-progress__ring">
          <circle cx={dim / 2} cy={dim / 2} r={radius} fill="none" stroke-width={RING_STROKE} className="strand-progress__track" />
          <circle
            cx={dim / 2}
            cy={dim / 2}
            r={radius}
            fill="none"
            stroke-width={RING_STROKE}
            stroke-dasharray={circumference}
            stroke-dashoffset={isDeterminate ? offset : undefined}
            stroke-linecap="round"
            className="strand-progress__fill"
            transform={`rotate(-90 ${dim / 2} ${dim / 2})`}
          />
        </svg>
      </div>
    );
  }
  return (
    <div ref={ref} className={classes} {...aria} {...rest}>
      <div className="strand-progress__fill" style={isDeterminate ? { width: `${value}%` } : undefined} />
    </div>
  );
});
Progress.displayName = "Progress";