import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from '~context/MainProvider';
import { getRating } from '~helpers/rating';
import { translate } from '~helpers/getters';

import styles from './one-star.module.scss';

const OneStar = ({
  rating,
  numOfStars = 5,
  active = true,
  showLabel = false,
  icon = false,
  showDecimal = false,
}) => {
  const { translations } = useContext(Context) || {};

  return (
    <div className={`${styles.starRatingContainer || ''} ${!active && (styles.inactive || '')}`}>
      {showLabel && <span>{translate(translations, 'rating', 'Rating:')}</span>}
      {!icon ? <span className={styles.fullStar || ''} /> : icon}
      {showDecimal ? getRating(rating).toFixed(1) : getRating(rating)}
      <span>/</span>
      <span>{numOfStars}</span>
    </div>
  );
};

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

export default OneStar;
