/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import { getExtraField } from 'gatsby-core-theme/src/helpers/getters';
import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-four';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import TermsConditions from 'gatsby-core-theme/src/components/molecules/tnc';
import PrettyLink from '~atoms/pretty-link';
import OperatorDetails from '../../molecules/operator-details';
import { TrackingKeys } from '~constants/tracking-api'
import Coupon from '../coupon';
import styles from './recommended-operators.module.scss';

const RecommendedOperators = ({
  showCouponCode = false,
  showRating = false,
  showAuthor = false,
  title = 'Recommended Casinos:',
  buttonType = 'primary',
  operators,
  pageTemplate,
  tncFixed = false,
  operatorLogoWidth,
  operatorLogoHeight,
  modulePosition
}) => (
  <div className={styles.reccommendedCasinos}>
    <h3>{title}</h3>
    {operators.slice(0, 3).map((operator, index) => {
      const couponCode = getExtraField(operator.extra_fields, 'coupon_code');

      return (
        <div className={styles.row || ''}>
          <OperatorDetails
            showRating={showRating}
            item={operator}
            template={pageTemplate}
            showAuthor={showAuthor}
            showReviewLink={false}
            costumeStyle={styles.operatorDetails || ''}
            moduleName={TrackingKeys?.WAGERINGCALCULATOR}
            imageWidth={operatorLogoWidth}
            imageHeight={operatorLogoHeight}
            modulePosition={modulePosition}
            itemPosition={index + 1}
          />
          <div className={styles.operatorBonus}>
            <PrettyLink
              operator={operator}
              pageTemplate={pageTemplate}
              moduleName={TrackingKeys?.WAGERINGCALCULATOR}
              tracker="main"
              clickedElement="oneliner"
              modulePosition={modulePosition}
              itemPosition={index + 1}
            >
              <Bonus item={operator} moduleName={TrackingKeys?.WAGERINGCALCULATOR} tracker="main" pageTemplate={pageTemplate} modulePosition={modulePosition}
                itemPosition={index + 1} />
            </PrettyLink>

            <TermsConditions operator={operator} isFixed={tncFixed} />
          </div>
          {(showCouponCode && couponCode) && (
            <div className={styles.couponCtaContainer}>
              <Coupon code={couponCode} shortCode={operator?.short_name} />
              <OperatorCta
                operator={operator}
                tracker="main"
                buttonType={buttonType}
                pageTemplate={pageTemplate}
                moduleName={TrackingKeys?.WAGERINGCALCULATOR}
                modulePosition={modulePosition}
                itemPosition={index + 1}
              />
            </div>
          )}
          {(!showCouponCode || !couponCode) && (
            <OperatorCta
              operator={operator}
              pageTemplate={pageTemplate}
              tracker="main"
              buttonType={buttonType}
              moduleName={TrackingKeys?.WAGERINGCALCULATOR}
              modulePosition={modulePosition}
              itemPosition={index + 1}
            />
          )}
        </div>
      );
    })}
  </div>
);

export default RecommendedOperators;

RecommendedOperators.propTypes = {
  showCouponCode: PropTypes.bool,
  showRating: PropTypes.bool,
  tncFixed: PropTypes.bool,
  showAuthor: PropTypes.bool,
  title: PropTypes.string,
  buttonType: PropTypes.string,
  operators: PropTypes.arrayOf([
    PropTypes.shape({
      name: PropTypes.string,
    }),
  ]),
  operatorLogoWidth: PropTypes.number,
  operatorLogoHeight: PropTypes.number,
  modulePosition: PropTypes.number,
  pageTemplate: PropTypes.string,
};
