import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { translate, prettyTracker, getBonusData } from '~helpers/getters.mjs';
import { Context } from '~context/MainProvider';
import CtaButton from '../../../atoms/button/operator-cta';
import styles from './bonus-box.module.scss';
import VariableComponent from '../variables';

export default function BonusBox({
  item,
  tracker,
  ctaBtn = true,
  welcomeBonus = true,
  pageTemplate = null,
  showVariablesComponent = true,
  variableInsideContainer = false,
  splitBy = '+',
  feSeparator = '+',
  buttonType = 'primary',
  module = null,
}) {
  const { translations } = useContext(Context) || {};
  const welcomeBonusTranslation = translate(translations, 'welcome_bonus', 'Welcome Bonus');
  const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
  const data = getBonusData(item, tracker, splitBy);

  const content = () => (
    <a
      href={prettyLink || '#'}
      target="_blank"
      rel="nofollow noreferrer sponsored"
      className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
    >
      {welcomeBonus && <p>{welcomeBonusTranslation}</p>}
      {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
      {data?.secondLine && (
        <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
      )}
    </a>
  );

  return (
    <div
      className={`${styles.bonusBox} ${
        showVariablesComponent ? styles.includeVariableComponent : ''
      }`}
    >
      {!showVariablesComponent ? (
        <>
          {content()}
          {ctaBtn && <CtaButton operator={item} buttonType={buttonType} module={module} />}
        </>
      ) : (
        <div>
          {content()}
          {ctaBtn && <CtaButton operator={item} buttonType={buttonType} module={module} />}
          {showVariablesComponent && variableInsideContainer && <VariableComponent item={item} />}
        </div>
      )}

      {showVariablesComponent && !variableInsideContainer && <VariableComponent item={item} />}
    </div>
  );
}

BonusBox.propTypes = {
  item: PropTypes.shape({}),
  tracker: PropTypes.string,
  ctaBtn: PropTypes.bool,
  welcomeBonus: PropTypes.bool,
  pageTemplate: PropTypes.string,
  showVariablesComponent: PropTypes.bool,
  splitBy: PropTypes.string,
  feSeparator: PropTypes.string,
  buttonType: PropTypes.string,
  variableInsideContainer: PropTypes.bool,
  module: PropTypes.string,
};
