/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import Bonus from '~molecules/bonus-box/template-one';
import SellingPoints from '~atoms/selling-points';
import ReviewLink from '../../../atoms/review-link';
import OperatorCta from '~atoms/button/operator-cta';
import { prettyTracker, imagePrettyUrl, getAltText } from '~helpers/getters';
import LazyImage from '~hooks/lazy-image';

import styles from './default-row.module.scss';

const Row = ({
  item,
  oneliner = 'main',
  layout = 'list',
  tracker = 'main',
  pageTemplate,
  itemRefs,
  index,
  className,
  module,
}) => {
  const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
  // const itemRating = item.rating;
  const reviewPath = item.review_link ? `/${item.review_link}` : item.path || null;

  const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;

  const addToRefs = (el, itemNum) => {
    if (el && itemRefs) {
      itemRefs.current[itemNum] = el;
    }
  };

  return (
    <li
      className={`${className || ''} ${styles.row || ''} ${styles[layout] || ''}`}
      ref={(el) => addToRefs(el, index)}
    >
      <div className={styles.ribbons || ''}>
        {item.ribbons && item.ribbons.map((ribbon) => <span>{ribbon}</span>)}
      </div>
      <a
        href={prettyLink || '#'}
        title={item.name}
        className={`casinos-top-list-gtm logo-cta ${styles.logo}`}
        target="_blank"
        rel="noreferrer sponsored nofollow"
        aria-label={`${item.name} Link`}
      >
        <LazyImage
          alt={getAltText(imageObject, item.name)}
          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 100, 100)}
          width={100}
          height={100}
        />
      </a>
      <Bonus item={item} tracker={oneliner} />
      {/* <StarRating numOfStars={5} rating={itemRating} showLabel /> */}
      <SellingPoints sellingPoints={item.selling_points} />
      {reviewPath && (
        <ReviewLink
          className={`${styles.reviewLink || ''}  toplist-variant-one-gtm`}
          template={pageTemplate}
          operatorName={item.name}
          reviewPath={reviewPath}
        />
      )}
      <OperatorCta
        operator={item}
        tracker={tracker}
        gtmClass="toplist-operator-cta-gtm"
        pageTemplate={pageTemplate}
        module={module}
      />
    </li>
  );
};

Row.propTypes = {
  oneliner: PropTypes.string,
  layout: PropTypes.string,
  tracker: PropTypes.string,
  module: PropTypes.string,
  item: PropTypes.shape({
    name: PropTypes.string,
    ribbons: PropTypes.arrayOf(PropTypes.string),
    logo_url: PropTypes.string,
    selling_points: PropTypes.arrayOf(PropTypes.string),
    review_link: PropTypes.string,
    rating: PropTypes.string,
    one_liners: PropTypes.shape({
      main: PropTypes.shape({
        one_liner: PropTypes.string,
      }),
    }),
    logo_url_object: PropTypes.shape({
      filename: PropTypes.string,
    }),
    standardised_logo_url_object: PropTypes.shape({
      filename: PropTypes.string,
    }),
    bonus: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
  }).isRequired,
  pageTemplate: PropTypes.string,
};

export default Row;
