/* eslint-disable camelcase */
/* eslint-disable no-nested-ternary */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { translate, getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
import keygen from 'gatsby-core-theme/src/helpers/keygen';
import { operatorRatings } from '../../../constants/ratings-constant';

import styles from './ratings.module.scss';

export default function Ratings({ item, type, numOfStars = 5, currency = '€' }) {
  const { translations } = useContext(Context) || {};

  const ratings = operatorRatings[type] || [];
  const rangeText = { 0: 'Low', 1: 'Medium', 2: 'High' };

  // (item?.bonus || item) for the games we don't have ratings in market
  const ratingsData = operatorRatings.ratingProperties.some((prop) => item[prop])
    ? item
    : item?.bonus || item;

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

  return (
    <ul className={`${styles?.ratingList || ''}`}>
      {ratings?.map((rating) => {
        const { fieldValue, translationKey, fieldLabel, componentToUse } = rating || {};
        let valueDiplayed;
        const value = getObjectValue(ratingsData, fieldValue);
        const component = componentToUse ? componentToUse(numOfStars, value, currency) : false;

        if (component && value) {
          valueDiplayed = component || '-';
        } else if (fieldValue.includes('volatility')) {
          valueDiplayed = rangeText[getObjectValue(ratingsData, fieldValue)] || '-';
        } else {
          valueDiplayed = value || '-';
        }

        if (['coming_soon', 'inactive'].includes(item?.status)) {
          valueDiplayed = 'TBA';
        }

        return (
          <li
            key={keygen()}
            className={`${styles?.item || ''} ${
              rating?.showOnlyMobile ? styles?.showOnlyMobile || '' : ''
            }`}
          >
            <p className={styles?.label || ''}>
              {translate(translations, translationKey, fieldLabel)}
            </p>

            {valueDiplayed === 'TBA' ? (
              <p className={`${styles?.value || ''} ${styles?.tbaValue}`}>
                {translate(translations, 'tba', 'TBA')}
              </p>
            ) : (
              <>
                {valueDiplayed}
                {fieldValue === 'rtp' && '%'}
              </>
            )}
          </li>
        );
      })}
    </ul>
  );
}

Ratings.propTypes = {
  item: PropTypes.shape({
    name: PropTypes.string,
    bonus: PropTypes.shape({}),
    rating: PropTypes.string,
    status: PropTypes.string,
    rating_bonuses: PropTypes.string,
    rating_casino: PropTypes.string,
    rating_customer: PropTypes.string,
    rating_games: PropTypes.string,
    rating_payout: PropTypes.string,
    first_rating: PropTypes.string,
    second_rating: PropTypes.string,
    third_rating: PropTypes.string,
    fourth_rating: PropTypes.string,
  }),
  type: PropTypes.string,
  numOfStars: PropTypes.string,
  currency: PropTypes.string,
};
