Review summary

"use client";

import { useId, useState } from "react";
import type { ComponentProps, ReactNode } from "react";
import { Icon } from "./icon";
import { Rating } from "./rating";
import "./review-summary.css";

export type ReviewStars = 1 | 2 | 3 | 4 | 5;
type Stars = ReviewStars;

export type ReviewSummaryLabels = {
  /** Heading above the summary. */
  heading: string;
  /** "Based on {count} reviews". {count} is replaced with the grouped number. */
  basedOn: string;
  /** Spoken average: "Rated {average} out of 5". */
  average: string;
  /** Spoken row: "{stars} stars, {count} reviews, {percent}". */
  row: string;
  /** Spoken row for one star. */
  rowOne: string;
  /** Names the list of bars. */
  distribution: string;
};

const english: ReviewSummaryLabels = {
  heading: "Customer reviews",
  basedOn: "Based on {count} reviews",
  average: "Rated {average} out of 5",
  row: "{stars} stars, {count} reviews, {percent}",
  rowOne: "{stars} star, {count} reviews, {percent}",
  distribution: "Reviews by star rating",
};

export type ReviewSummaryProps = Omit<ComponentProps<"section">, "onChange"> & {
  /** Number of reviews at each star rating. */
  distribution: Record<Stars, number>;
  /** The average. Worked out from distribution when left out. */
  average?: number;
  /** The star rating the list is filtered to, or null for all. Controlled. */
  filter?: Stars | null;
  defaultFilter?: Stars | null;
  /** Makes each row a toggle button. Called with the stars, or null when the active row is pressed again. */
  onFilter?: (stars: Stars | null) => void;
  /** A slot under the summary, such as a "Write a review" button. */
  action?: ReactNode;
  /** s is one line of average and stars over the bars, for a sidebar or a tile. */
  size?: "s" | "m";
  locale?: string;
  /** Level of the heading. */
  headingLevel?: 2 | 3 | 4;
  /** Wording, for another language. Each string is a template. */
  labels?: Partial<ReviewSummaryLabels>;
};

const fill = (template: string, values: Record<string, string>) =>
  template.replace(/\{(\w+)\}/g, (match, key: string) => values[key] ?? match);

export function ReviewSummary({
  distribution,
  average,
  filter,
  defaultFilter = null,
  onFilter,
  action,
  size = "m",
  locale = "en-US",
  headingLevel = 3,
  labels,
  className,
  ...rest
}: ReviewSummaryProps) {
  const id = useId();
  const [inner, setInner] = useState<Stars | null>(defaultFilter);
  const active = filter === undefined ? inner : filter;
  const words = { ...english, ...labels };

  const rows: Stars[] = [5, 4, 3, 2, 1];
  const total = rows.reduce((sum, n) => sum + (distribution[n] ?? 0), 0);
  const mean = average ?? (total === 0 ? 0 : rows.reduce((sum, n) => sum + n * (distribution[n] ?? 0), 0) / total);

  const one = new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
  const whole = new Intl.NumberFormat(locale);
  const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });

  const choose = (n: Stars) => {
    const next = active === n ? null : n;
    if (filter === undefined) setInner(next);
    onFilter?.(next);
  };

  const Heading = `h${headingLevel}` as "h3";
  const headingId = `${id}-heading`;
  const averageText = one.format(mean);

  return (
    <section
      aria-labelledby={headingId}
      {...rest}
      className={["eq-review-summary", className].filter(Boolean).join(" ")}
      data-size={size}
    >
      <div className="eq-review-summary-layout">
        <div className="eq-review-summary-overview">
          <Heading className="eq-review-summary-heading" id={headingId}>
            {words.heading}
          </Heading>
          <div className="eq-review-summary-score">
            <span className="eq-review-summary-average" aria-hidden="true">
              {averageText}
            </span>
            <Rating label={fill(words.average, { average: averageText })} value={mean} readOnly allowHalf size="s" aria-hidden="true" />
            <span className="eq-review-summary-hidden">{fill(words.average, { average: averageText })}</span>
            <span className="eq-review-summary-count">{fill(words.basedOn, { count: whole.format(total) })}</span>
          </div>
          {action != null && <div className="eq-review-summary-action">{action}</div>}
        </div>

        <ul className="eq-review-summary-bars" role="list" aria-label={words.distribution}>
          {rows.map((n) => {
            const count = distribution[n] ?? 0;
            const share = total === 0 ? 0 : count / total;
            const spoken = fill(n === 1 ? words.rowOne : words.row, {
              stars: whole.format(n),
              count: whole.format(count),
              percent: percent.format(share),
            });
            const content = (
              <>
                <span className="eq-review-summary-stars" aria-hidden="true">
                  {whole.format(n)}
                  <Icon name="star" size={12} />
                </span>
                <span className="eq-review-summary-track" aria-hidden="true">
                  <span className="eq-review-summary-fill" style={{ width: `${share * 100}%` }} />
                </span>
                <span className="eq-review-summary-tally" aria-hidden="true">
                  {whole.format(count)}
                </span>
                <span className="eq-review-summary-percent" aria-hidden="true">
                  {percent.format(share)}
                </span>
                <span className="eq-review-summary-hidden">{spoken}</span>
              </>
            );
            return (
              <li key={n} className="eq-review-summary-row">
                {onFilter ? (
                  <button
                    type="button"
                    className="eq-review-summary-filter"
                    aria-pressed={active === n}
                    disabled={count === 0}
                    onClick={() => choose(n)}
                  >
                    {content}
                  </button>
                ) : (
                  <span className="eq-review-summary-line">{content}</span>
                )}
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}