import React from 'react';
import PropTypes from 'prop-types';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { getRating } from '~helpers/rating';

import styles from './linear-rating.module.scss';

const LinearStarRating = ({
  rating,
  numOfStars = 5,
  active = true,
  showLabel = false,
  icon = null,
  showRatingText = true,
  showDecimal = false,
  showRoundedRating = false,
  showTotal=false
}) => {
  // Calculate the percentage for the bar fill based on the rating and numOfStars
  const calculatedRating = getRating(rating, showRoundedRating);  
  const percentage = calculatedRating  ? ((calculatedRating / numOfStars) * 100) : 0;

  return (
    <div className={`${styles.starRatingContainer || ''} ${!active && (styles.inactive || '')}`}>
      {showLabel && <span>{useTranslate('rating', 'Rating:')}</span>}
      <div className={styles.bar}>
        <div
          className={styles.fill}
          style={{
            width: `${percentage}%`,
          }}
        />
      </div>
      {showRatingText && (
        <div className={styles.ratingText}>
          {icon && icon}
          {showDecimal ? calculatedRating.toFixed(1) : calculatedRating}
          {showTotal && (
            <>
              <span>/</span>
              <span>{numOfStars}</span>
            </>
          )}
        </div>
      )}
    </div>
  );
};

LinearStarRating.propTypes = {
  numOfStars: PropTypes.oneOf([5, 10]),
  rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
  active: PropTypes.bool,
  showLabel: PropTypes.bool,
  icon: PropTypes.element,
  showDecimal: PropTypes.bool,
  showRoundedRating: PropTypes.bool,
  showRatingText: PropTypes.bool,
  showTotal: PropTypes.bool,
};

export default LinearStarRating;
