/* 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 Coupon from '../coupon';
import styles from './recommended-operators.module.scss';

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

      return (
        <div>
          <OperatorDetails
            showRating={showRating}
            item={operator}
            showAuthor={showAuthor}
            showReviewLink={false}
            costumeStyle={styles.operatorDetails}
            module="wagering_calculator"
          />
          <div className={styles.operatorBonus}>
            <PrettyLink
              operator={operator}
              pageTemplate={null}
              module="wagering_calculator"
              tracker="main"
              clickedElement="oneliner"
            >
              <Bonus item={operator} tracker="main" />
            </PrettyLink>

            {showTerms && <TermsConditions operator={operator} hasCollapse={false} />}
          </div>
          {showCouponCode && (
            <div className={styles.couponCtaContainer}>
              {showCouponCode && <Coupon code={couponCode} />}
              <OperatorCta
                operator={operator}
                tracker="main"
                buttonType={buttonType}
                module="wagering_calculator"
              />
            </div>
          )}
          {!showCouponCode && (
            <OperatorCta
              operator={operator}
              tracker="main"
              buttonType={buttonType}
              module="wagering_calculator"
            />
          )}
        </div>
      );
    })}
  </div>
);

export default RecommendedOperators;

RecommendedOperators.propTypes = {
  showCouponCode: PropTypes.bool,
  showRating: PropTypes.bool,
  showTerms: PropTypes.bool,
  showAuthor: PropTypes.bool,
  title: PropTypes.string,
  buttonType: PropTypes.string,
  operators: PropTypes.arrayOf([
    PropTypes.shape({
      name: PropTypes.string,
    }),
  ]),
};
