/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
import AdminButton from '../../../atoms/admin/card/button';
import { Context } from '~context/MainProvider.js';
import CasinoDetails from '../../operator-details';
import VerifiedAuthor from '../../../../images/icons/verified-author';
import { TrackingKeys } from '~constants/tracking-api'
import styles from './variant-one.module.scss';

export default function Row({
  item,
  tracker = 'main',
  oneliner = 'main',
  layout = 'list',
  moduleName = TrackingKeys?.TOPLIST,
  index,
  className,
  itemRefs,
  authorTemplateTwo = false,
  showSellingPoints = true,
  showAuthor,
  useOneStarRating,
  template,
  verifyIcon = <VerifiedAuthor />,
  isPPC,
  width = 96,
  height = 96,
  modulePosition,
  itemPosition,
}) {
  const sellingPoints = item.selling_points;
  const { ribbons } = item;
  const { admin } = useContext(Context) || {};
  const addToRefs = (el, itemNum) => {
    if (el && itemRefs) {
      itemRefs.current[itemNum] = el;
    }
  };
  const bonusType = item?.toplist_bonus || oneliner;
  
  const firstRowItems = index === 0 || index === 1 || index === 2;

  const Content = () => (
    <>
      {admin && <AdminButton item={item} isToplist />}
      <CasinoDetails
        item={item}
        tracker={tracker}
        template={template}
        prettyLinkTracker
        showAuthor={showAuthor}
        useOneStarRating={useOneStarRating}
        costumeStyle={styles.operatorDetails}
        authorTemplateTwo={!!((layout === 'grid' && firstRowItems) || authorTemplateTwo)}
        ribbons={ribbons}
        showRibbon
        icon={verifyIcon}
        isPPC={isPPC}
        moduleName={moduleName}
        imageWidth={width}
        imageHeight={height}
        modulePosition={modulePosition}
        itemPosition={itemPosition}
      />

      <Bonus
        moduleName={moduleName}
        item={item}
        tracker={bonusType}
        modulePosition={modulePosition}
        itemPosition={itemPosition}
        pageTemplate={template}
      />

      {showSellingPoints && <SellingPoints sellingPoints={sellingPoints} limit={3} />}

      <OperatorCta
        operator={item}
        tracker={tracker}
        gtmClass="toplist-operator-cta-gtm"
        moduleName={moduleName}
        pageTemplate={template}
        modulePosition={modulePosition}
        itemPosition={itemPosition}
      />
    </>
  );

  return (
    <li
      className={`${className || ''} ${styles?.row || ''} ${layout === 'grid' && firstRowItems ? styles.grid || '' : styles.list || ''
        } ${styles[`toplist_${index}`] || ''}`}
      ref={(el) => addToRefs(el, index)}
    >
      <div className={styles.container}>
        <Content />
      </div>
      <Tnc isFixed operator={item} />
    </li>
  );
}

Row.propTypes = {
  index: PropTypes.number,
  className: PropTypes.string,
  tracker: PropTypes.string,
  showSellingPoints: PropTypes.bool,
  oneliner: PropTypes.string,
  layout: PropTypes.oneOf(['list', 'grid']),
  item: PropTypes.shape({
    path: PropTypes.string,
    authorName: PropTypes.string,
    authorPath: PropTypes.string,
    founded: PropTypes.string,
    name: PropTypes.string,
    logo_url: PropTypes.string,
    rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    selling_points: PropTypes.arrayOf(PropTypes.string),
    review_link: PropTypes.string,
    extra_fields: PropTypes.shape({
      terms_and_conditions_text_enabled: PropTypes.string,
      ribbon_text: PropTypes.string,
      ribbon_color: PropTypes.string,
      pro_1: PropTypes.string,
      pro_2: PropTypes.string,
      pro_3: PropTypes.string,
    }),
    // eslint-disable-next-line react/forbid-prop-types
    logo: PropTypes.object,
    // eslint-disable-next-line react/forbid-prop-types
    logo_url_object: PropTypes.object,

    bonus: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
    relation: PropTypes.shape({
      rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      name: PropTypes.string,
      path: PropTypes.string,
      logo_url: PropTypes.string,
    }),
  }).isRequired,
  showAuthor: PropTypes.bool,
  useOneStarRating: PropTypes.bool,
  verifyIcon: PropTypes.element,
  isPPC: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
};
