import { useState, useEffect, useCallback } from "react";
import { AiFillStar, AiOutlineStar } from "react-icons/ai";

import "../../styles/rating-stars.css";

type StarsPropType = {
  totalStars?: number;
  rating?: number;
  precision?: number;
  color?: string;
};

/**
 *
 * @param props {StarsPropType}
 * @returns a rating component that displays a static rating
 */
export default function StaticRatingStars(props: StarsPropType) {
  const {
    totalStars = 5,
    rating = 3,
    precision = 0.25,
    color = "#000",
  } = props;

  const [activeStar, setActiveStar] = useState<number>(rating);

  const syncRating = useCallback(() => {
    const nearestNumber =
      Math.round((rating + precision / 2) / precision) * precision;

    let rounded_up_number = Number(
      nearestNumber.toFixed(precision.toString().split(".")[1]?.length || 0)
    );
    setActiveStar(() => rounded_up_number);
  }, []);

  useEffect(() => {
    syncRating();
  }, [syncRating]);

  return (
    <div className="outer__rating-stars__container">
      {[...new Array(totalStars)].map((arr, index) => {
        const activeState = activeStar;

        const showEmptyIcon = activeState === -1 || activeState < index + 1;

        const isActiveRating = activeState !== 1;
        const isRatingWithPrecision = activeState % 1 !== 0;
        const isRatingEqualToIndex = Math.ceil(activeState) === index + 1;
        const showRatingWithPrecision =
          isActiveRating && isRatingWithPrecision && isRatingEqualToIndex;

        return (
          <div className="inner__rating-stars__container" key={index}>
            <div
              className="filled__star__container"
              style={{
                width: showRatingWithPrecision
                  ? `${(activeState % 1) * 100}%`
                  : "0%",
              }}
            >
              <AiFillStar color={color} />
            </div>

            <div>
              {showEmptyIcon ? (
                <AiOutlineStar color={color} />
              ) : (
                <AiFillStar color={color} />
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}