/* eslint-disable camelcase */
import React from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
import LazyImage from '~hooks/lazy-image';
import BonusBox from '~molecules/bonus-box/template-four';
import OperatorCta from '~atoms/button/operator-cta';
import Rating from '~molecules/star-rating/one-star';
import Tnc from '~molecules/tnc';
import styles from './bonus.module.scss';

export default function Bonus({
  operator,
  pageTemplate,
  module = {
    name: 'bonus',
  },
  tncEnable = true,
  tncFixed = false,
}) {
  const prettyLink = prettyTracker(
    operator,
    module?.tracking_link_name || 'main',
    false,
    pageTemplate
  );
  const { standardised_logo_url, logo_url, bonus, name } = operator || {};
  const logo = standardised_logo_url || logo_url;

  const showTncFixed = tncEnable && tncFixed;

  return (
    <div
      className={`${styles.operatorBanner || ''} ${tncEnable ? styles.tncEnable : ''} ${
        showTncFixed ? styles.showTncFixed || '' : ''
      }`}
    >
      <div className={styles.container}>
        <div>
          <a
            href={prettyLink}
            className={`${styles.logo || ''} operator-banner-gtm logo-cta`}
            title={operator?.name}
            target="_blank"
            rel="noreferrer sponsored"
            aria-label={`${operator?.name} Link`}
          >
            <LazyImage alt={operator?.name} src={imagePrettyUrl(logo)} height={120} width={100} />
            <div className={styles.details}>
              {name && <span>{name}</span>}
              {bonus?.rating && <Rating rating={bonus?.rating} showDecimal />}
            </div>
          </a>
          <div className={styles.bonus || ''}>
            <BonusBox item={operator} tracker={module?.type || 'main'} />
            {tncEnable && !tncFixed && <Tnc hasCollapse={false} operator={operator} />}
          </div>
        </div>

        <OperatorCta
          operator={operator}
          pageTemplate={pageTemplate}
          tracker={module?.tracking_link_name || 'main'}
          module={module.name}
          icon={<FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />}
        />
        {showTncFixed && <Tnc hasCollapse={false} operator={operator} />}
      </div>
    </div>
  );
}

Bonus.propTypes = {
  operator: PropTypes.shape({
    standardised_logo_url: PropTypes.string,
    logo: PropTypes.string,
    logo_url: PropTypes.string,
    bonus: PropTypes.shape({
      rating: PropTypes.string,
    }),
    name: PropTypes.string,
    rating: PropTypes.string,
    url: PropTypes.string,
    extra_fields: PropTypes.shape({
      terms_and_conditions_text_enabled: PropTypes.string,
    }),
    status: PropTypes.string,
  }),
  tncFixed: PropTypes.bool,
  tncEnable: PropTypes.bool,
  pageTemplate: PropTypes.string,
  module: PropTypes.shape({
    tracking_link_name: PropTypes.string,
    type: PropTypes.string,
    name: PropTypes.string,
  }),
};
