Review

"use client";

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

export type ReviewVote = "yes" | "no";

export type ReviewLabels = {
  /** Spoken rating: "Rated {rating} out of 5". */
  rating: string;
  verified: string;
  helpful: string;
  yes: string;
  no: string;
  /** "Response from {author}". */
  response: string;
  /** Names the media thumbnails. */
  media: string;
};

const english: ReviewLabels = {
  rating: "Rated {rating} out of 5",
  verified: "Verified purchase",
  helpful: "Was this helpful?",
  yes: "Yes",
  no: "No",
  response: "Response from {author}",
  media: "Photos from this review",
};

export type ReviewProps = Omit<ComponentProps<"article">, "title" | "role"> & {
  /** Stars given, 1 to 5. */
  rating: number;
  title?: ReactNode;
  headingLevel?: 2 | 3 | 4 | 5 | 6;
  author: string;
  /** Who the author is, such as "Head chef, Marrow". Shown after the name. */
  role?: ReactNode;
  /** A picture beside the byline, usually an Avatar. Decorative: give it an empty alt, the name is written beside it. */
  avatar?: ReactNode;
  location?: string;
  /** ISO date the review was written. Leave out for a quote with no date. */
  date?: string;
  locale?: string;
  verified?: boolean;
  /** What was bought, such as "Size: M, Colour: Oat". */
  variant?: string;
  /** Shows the helpful vote with these counts, which do not include this reader's vote. */
  helpful?: { yes: number; no: number };
  /** This reader's vote, controlled. */
  vote?: ReviewVote | null;
  defaultVote?: ReviewVote | null;
  /** Called with the new vote, or null when the reader takes it back. */
  onVote?: (vote: ReviewVote | null) => void;
  /** A reply from the seller under the review. */
  response?: { author: string; date: string; body: ReactNode };
  /** Thumbnails of photos the reviewer added. */
  media?: ReactNode;
  size?: "s" | "m";
  /** Wording, for another language. */
  labels?: Partial<ReviewLabels>;
};

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

export function Review({
  rating,
  title,
  headingLevel = 3,
  author,
  role,
  avatar,
  location,
  date,
  locale = "en-US",
  verified = false,
  variant,
  helpful,
  vote,
  defaultVote = null,
  onVote,
  response,
  media,
  size = "m",
  labels,
  className,
  children,
  ...rest
}: ReviewProps) {
  const id = useId();
  const [inner, setInner] = useState<ReviewVote | null>(defaultVote);
  const current = vote === undefined ? inner : vote;
  const words = { ...english, ...labels };

  const day = new Intl.DateTimeFormat(locale, { day: "numeric", month: "long", year: "numeric", timeZone: "UTC" });
  const whole = new Intl.NumberFormat(locale);
  const stars = Math.max(0, Math.min(5, Math.round(rating)));
  const Heading = `h${headingLevel}` as "h3";

  const cast = (choice: ReviewVote) => {
    const next = current === choice ? null : choice;
    if (vote === undefined) setInner(next);
    onVote?.(next);
  };

  const helpfulId = `${id}-helpful`;

  const byline = (
    <p className="eq-review-byline">
      <span className="eq-review-author">{author}</span>
      {role != null && <span className="eq-review-role">{role}</span>}
      {location && <span className="eq-review-location">{location}</span>}
      {date && (
        <time className="eq-review-date" dateTime={date}>
          {day.format(new Date(date))}
        </time>
      )}
    </p>
  );

  return (
    <article {...rest} className={["eq-review", className].filter(Boolean).join(" ")} data-size={size}>
      <div className="eq-review-rating">
        <Rating label={fill(words.rating, { rating: whole.format(stars) })} value={stars} readOnly size="s" aria-hidden="true" />
        <span className="eq-review-hidden">{fill(words.rating, { rating: whole.format(stars) })}</span>
      </div>
      {title != null && <Heading className="eq-review-title">{title}</Heading>}

      {avatar != null ? (
        <div className="eq-review-person">
          <span className="eq-review-avatar">{avatar}</span>
          {byline}
        </div>
      ) : (
        byline
      )}

      {(verified || variant) && (
        <p className="eq-review-facts">
          {verified && (
            <span className="eq-review-verified">
              <Icon name="check-circle" size={14} />
              {words.verified}
            </span>
          )}
          {variant && <span className="eq-review-variant">{variant}</span>}
        </p>
      )}

      <div className="eq-review-body">{children}</div>

      {media != null && (
        <div className="eq-review-media" role="group" aria-label={words.media}>
          {media}
        </div>
      )}

      {response && (
        <div className="eq-review-response">
          <p className="eq-review-response-head">
            <span className="eq-review-response-author">{fill(words.response, { author: response.author })}</span>
            <time className="eq-review-date" dateTime={response.date}>
              {day.format(new Date(response.date))}
            </time>
          </p>
          <div className="eq-review-response-body">{response.body}</div>
        </div>
      )}

      {helpful && (
        <div className="eq-review-helpful" role="group" aria-labelledby={helpfulId}>
          <span className="eq-review-helpful-label" id={helpfulId}>
            {words.helpful}
          </span>
          {(["yes", "no"] as const).map((choice) => (
            <Button
              key={choice}
              size="s"
              variant="ghost"
              pressed={current === choice}
              onClick={() => cast(choice)}
              trail={
                <span className="eq-review-votes" data-pressed={current === choice || undefined}>
                  {whole.format(helpful[choice] + (current === choice ? 1 : 0))}
                </span>
              }
            >
              {words[choice]}
            </Button>
          ))}
        </div>
      )}
    </article>
  );
}