/* eslint-disable react/no-danger */
/* eslint-disable react/prop-types */
/* eslint-disable no-shadow */
import React from 'react';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
import Bonus from '~molecules/bonus-box/template-one';
import StarRating from '~molecules/star-rating/one-star';
import { imagePrettyUrl, getAltText } from '~helpers/getters';
import LazyImage from '~hooks/lazy-image';
import verify from '../../../../../images/verify.svg';
import PrettyLink from '~atoms/pretty-link';

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

export default function TopRow({
  item,
  oneliner = 'main',
  layout = 'list',
  tracker = 'main',
  pageTemplate,
  itemRefs,
  index,
  className,
}) {
  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;
    }
  };

  const authorObject = item?.authorImageObject;

  return (
    <li
      className={`${className || ''} ${styles.row} ${styles[layout]}`}
      ref={(el) => addToRefs(el, index)}
    >
      {item?.ribbons?.length > 0 && (
        <div className={styles.ribbons}>
          {item.ribbons && item.ribbons.map((ribbon) => <span>{ribbon}</span>)}
        </div>
      )}
      <div className={styles.topsection}>
        <PrettyLink
          operator={item}
          pageTemplate={pageTemplate}
          module="top_list"
          tracker={tracker}
          clickedElement="logo"
        >
          <LazyImage
            alt={getAltText(imageObject, item.name)}
            src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 88, 88)}
            width={88}
            height={88}
          />
        </PrettyLink>
      </div>
      <div className={styles.bottomsection}>
        <div>
          <PrettyLink
            operator={item}
            pageTemplate={pageTemplate}
            module="top_list"
            tracker={tracker}
          >
            {item.name}
          </PrettyLink>
          <div className={styles.ratingAuthor}>
            <StarRating numOfStars={5} rating={itemRating} />
            {authorObject && (
              <div>
                <LazyImage
                  alt={getAltText(authorObject, authorObject.alt)}
                  src={imagePrettyUrl(authorObject?.filename, 30, 30)}
                  width={30}
                  height={30}
                />
                <LazyImage src={verify} alt="verify" width={10} height={10} />
              </div>
            )}
          </div>
        </div>
        <div className={styles.oneliner}>
          <Bonus item={item} tracker={oneliner} />
          <OperatorCta
            operator={item}
            tracker={tracker}
            gtmClass="toplist-operator-cta-gtm"
            pageTemplate={pageTemplate}
          />
        </div>
        {reviewPath && <ReviewLink reviewPath={reviewPath} operatorName={item?.name} />}
        {/* {tandcEnabled && <Tnc operator={item} />} */}
        {item?.extra_fields?.terms_and_conditions && (
          <span
            className={styles.tnc}
            dangerouslySetInnerHTML={{
              __html: item?.extra_fields?.terms_and_conditions,
            }}
          />
        )}
      </div>
    </li>
  );
}
