/* eslint-disable react/no-danger */
/* 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 OperatorCta from '~atoms/button/operator-cta';

import styles from './default-row.module.scss';
import OperatorDetails from '../../../../../components/molecules/operator-details';

const Row = ({
  item,
  oneliner = 'main',
  layout = 'list',
  tracker = 'main',
  pageTemplate,
  itemRefs,
  index,
  className,
}) => {
  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>

      <OperatorDetails
        item={item}
        costumeStyle={styles.operatorDetails}
        prettyLinkTracker
        module="top_list"
        pageTemplate={pageTemplate}
        tracker={tracker}
      />

      <SellingPoints sellingPoints={item.selling_points} />
      <Bonus item={item} tracker={oneliner} />
      <OperatorCta
        operator={item}
        tracker={tracker}
        gtmClass="toplist-operator-cta-gtm"
        pageTemplate={pageTemplate}
      />

      {item?.extra_fields?.terms_and_conditions && (
        <span
          className={styles.tnc}
          dangerouslySetInnerHTML={{
            __html: item?.extra_fields?.terms_and_conditions,
          }}
        />
      )}
    </li>
  );
};

Row.propTypes = {
  oneliner: PropTypes.string,
  layout: PropTypes.string,
  tracker: 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;
