import cx from "classnames";
import React from "react";

import { Icon } from "../Icon";
import type { IconSize } from "../Icon/Icon";

export interface StarRatingProps
  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
  /** Extra class name for root element. */
  className?: string;
  /** Rating value. Rounded to nearest whole star. */
  rating: number;
  /** Icon size for each star. */
  size?: IconSize;
}

const CLASS_ROOT = "star-rating";
const STAR_COUNT = 5;
const FILLED_ICON_NAME = "star-favourite";
const EMPTY_ICON_NAME = "star-empty-thin";

const clampRating = (rating: number) =>
  Math.max(0, Math.min(Math.round(rating), STAR_COUNT));

const StarRating: React.FC<StarRatingProps> = ({
  className,
  rating,
  size,
  ...other
}) => {
  const filledStars = clampRating(rating);

  return (
    <span className={cx(CLASS_ROOT, className)} {...other}>
      {Array.from({ length: STAR_COUNT }, (_, index) => {
        const isFilled = index < filledStars;

        return (
          <Icon
            key={`${isFilled ? FILLED_ICON_NAME : EMPTY_ICON_NAME}-${index}`}
            className={cx(`${CLASS_ROOT}__icon`, {
              [`${CLASS_ROOT}__icon--filled`]: isFilled,
              [`${CLASS_ROOT}__icon--empty`]: !isFilled,
            })}
            name={isFilled ? FILLED_ICON_NAME : EMPTY_ICON_NAME}
            size={size}
          />
        );
      })}
    </span>
  );
};

StarRating.displayName = "StarRating";

export { StarRating };