Rating

"use client";

import { useId, useState } from "react";
import type { ComponentProps } from "react";
import "./rating.css";

export type RatingProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  /** Names the group. Visible when interactive; read as part of the image when read-only. */
  label: string;
  value?: number;
  defaultValue?: number;
  /** Called with the new value, or 0 when the current star is chosen again to clear it. */
  onValueChange?: (value: number) => void;
  max?: number;
  /** Shows a value as an image instead of a radio group. */
  readOnly?: boolean;
  /** Read-only only: rounds to the nearest half star instead of the nearest whole one. */
  allowHalf?: boolean;
  /** Radio group name, for forms. Defaults to a unique name per instance. */
  name?: string;
  size?: "s" | "m";
};

function Star() {
  return (
    <>
      <svg className="eq-rating-outline" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" aria-hidden="true">
        <path d="m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9Z" />
      </svg>
      <svg className="eq-rating-fill" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" aria-hidden="true">
        <path d="m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9Z" />
      </svg>
    </>
  );
}

export function Rating({
  label,
  value,
  defaultValue = 0,
  onValueChange,
  max = 5,
  readOnly = false,
  allowHalf = false,
  name,
  size = "m",
  className,
  ...rest
}: RatingProps) {
  const id = useId();
  const [inner, setInner] = useState(defaultValue);
  // The star just chosen, so only it pops. Set from the handler, never on first render.
  const [popped, setPopped] = useState<number | null>(null);
  const clamp = (n: number) => Math.max(0, Math.min(max, n));
  const current = clamp(value ?? inner);
  const stars = Array.from({ length: max }, (_, i) => i + 1);
  const root = ["eq-rating", className].filter(Boolean).join(" ");

  if (readOnly) {
    const shown = allowHalf ? Math.round(current * 2) / 2 : Math.round(current);
    return (
      <div role="img" aria-label={`${label}: ${shown} out of ${max}`} {...rest} className={root} data-size={size} data-readonly="">
        {stars.map((n) => (
          <span key={n} className="eq-rating-star" data-fill={shown >= n ? "full" : shown >= n - 0.5 ? "half" : undefined}>
            <Star />
          </span>
        ))}
      </div>
    );
  }

  const choose = (n: number) => {
    if (value === undefined) setInner(n);
    setPopped(n || null);
    onValueChange?.(n);
  };
  const group = name ?? `${id}-rating`;
  const labelId = `${id}-label`;

  return (
    <div role="radiogroup" aria-labelledby={labelId} {...rest} className={root} data-size={size}>
      <span className="eq-rating-label" id={labelId}>
        {label}
      </span>
      <span className="eq-rating-stars">
        {stars.map((n) => (
          <label key={n} className="eq-rating-star" data-fill={current >= n ? "full" : undefined} data-popped={popped === n || undefined}>
            <input
              type="radio"
              className="eq-rating-input"
              name={group}
              value={n}
              checked={current === n}
              aria-label={`${n} ${n === 1 ? "star" : "stars"}`}
              onChange={() => choose(n)}
              // A checked radio fires no change, so choosing the current value again clears it here.
              onClick={() => {
                if (current === n) choose(0);
              }}
            />
            <Star />
          </label>
        ))}
      </span>
    </div>
  );
}