import React from 'react';
import PropTypes from 'prop-types';
import { getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import { FaStar } from '@react-icons/all-files/fa/FaStar';
import { operatorRatings } from 'gatsby-core-theme/src/constants/ratings-constant';
import getVolatilityTranslationMeta from 'gatsby-core-theme/src/helpers/volatility';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './ratings-with-comments.module.scss';
import LinearStarRating from '../../../gatsby-core-theme/components/molecules/star-rating/linear-rating';

const RatingsWithComments = ({
  page,
  numOfStars = 5,
  templateWithBoxes = false,
  showTitle = true,
  currency = '€',
  showComment = true,
  icon = null,
  iconColor = '#D63B54',
  titleTag = 'h2',
}) => {
  const { relation: item, type } = page;
  if (!item) return null;
  
  const typeCheck =
    // eslint-disable-next-line no-nested-ternary
    type === 'operator' ? (item?.type === 'casino' ? 'operator' : item?.type) : type;

  const ratings = operatorRatings[typeCheck] || [];
  const Tag = titleTag || 'h2';

  const ratingsData = operatorRatings.ratingProperties.some((prop) => item[prop])
    ? item
    : item?.bonus || item;

  if (!ratings.length) {
    return null;
  }

  const renderRatingItem = (rating) => {
    const { fieldValue, translationKey, fieldLabel, componentToUse } = rating || {};
    let valueDisplayed;
    const value = getObjectValue(ratingsData, fieldValue);

    // eslint-disable-next-line no-nested-ternary
    const component = showComment ? (
      <LinearStarRating
        numOfStars={numOfStars}
        rating={value}
        icon={icon || <FaStar title="Star Icon" color={iconColor} />}
      />
    ) : componentToUse ? (
      componentToUse(numOfStars, value, currency)
    ) : (
      false
    );

    if (component) {
      valueDisplayed = component || '-';
    } else if (fieldValue.includes('volatility')) {
      const { key, displayValue } = getVolatilityTranslationMeta(value);
      valueDisplayed = key ? useTranslate(key, displayValue) : displayValue;
    } else {
      valueDisplayed = value || '-';
    }

    const comment = showComment
      ? ratingsData?.rating_comments?.find((entry) => entry?.rating_name === fieldValue)?.comment
      : null;
    
    return (
      <li
        key={keygen()}
        className={`${styles?.item || ''} ${fieldLabel === 'Overall' && styles?.overall}`}
      >
        <p className={styles?.label || ''}>{useTranslate(translationKey, fieldLabel)}</p>

        <>
          {valueDisplayed}
          {typeof valueDisplayed === 'number' && fieldValue === 'rtp' && '%'}
          {comment && <span className={styles?.comment}>{comment}</span>}
        </>
      </li>
    );
  };
  return (
    <div
      className={`${styles.ratingsContainer} ${templateWithBoxes && styles.ratingWithBoxes} ${
        showComment ? styles.ratingsWithComments : ''
      }`}
    >
      {showTitle ? (
        <div className={styles.withTitle || ''}>
          <Tag>{useTranslate('ratings_with_comments_title', 'Ratings')}</Tag>
          {ratings
            ?.filter((rating) => rating.fieldLabel === 'Overall')
            .map((rating) => renderRatingItem(rating))}
        </div>
      ) : (
        ratings
          ?.filter((rating) => rating.fieldLabel === 'Overall')
          .map((rating) => renderRatingItem(rating))
      )}

      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
      <ul className={`${styles?.ratingList || ''}`} tabIndex={0}>
        {ratings
          ?.filter((rating) => rating.fieldLabel !== 'Overall')
          .map((rating) => renderRatingItem(rating))}
      </ul>
    </div>
  );
};

RatingsWithComments.propTypes = {
  page: PropTypes.shape({
    relation: PropTypes.shape({
      type: PropTypes.string,
      bonus: PropTypes.shape({}),
    }),
    type: PropTypes.shape({}),
  }),
  numOfStars: PropTypes.number,
  templateWithBoxes: PropTypes.bool,
  showTitle: PropTypes.string,
  currency: PropTypes.string,
  showComment: PropTypes.bool,
  icon: PropTypes.element,
  iconColor: PropTypes.string,
  titleTag: PropTypes.string,
};

export default RatingsWithComments;
