import React from 'react';

import ReviewStars from './ReviewStars';
import scrollToId from '../utils/scrollToElement';

export interface ReviewDataTypes {
  always?: boolean;
  averageRating: number;
  count: number;
  reviewCount?: any;
  reviews?: [];
}

export interface ReviewTypes {
  reviewData: ReviewDataTypes | null;
  hideCount?: boolean;
  reviewsText?: string | null;
}

const StarRating = ({
  reviewData,
  hideCount = false,
  reviewsText = null,
}: ReviewTypes) => {
  if (!reviewData || reviewData.count === 0 || !reviewData.averageRating)
    return <section id="StarRating--empty" />;

  return (
    <section id="StarRating--cmpt">
      <span className="sr-only">{`Rated ${reviewData.averageRating} out of 5`}</span>
      <ReviewStars averageRating={reviewData.averageRating} />

      <span className="pl-2 text-xs">
        {/* just the count */}
        {reviewData.count > 0 && hideCount !== true && (
          <span className="font--12 font--dark666 hidden--md hidden--lg">
            {`${reviewData.count} Review${reviewData.count === 1 ? '' : 's'}`}
          </span>
        )}
      </span>

      {reviewData.count > 0 && reviewsText !== null && (
        <button
          type="button"
          className="btn btn-links font--links"
          onClick={() => scrollToId('reviews')}
        >
          {reviewsText}
        </button>
      )}
    </section>
  );
};

export default StarRating;