/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable eqeqeq */
/* eslint-disable react/prop-types */
/* eslint-disable camelcase */
import React from 'react';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import PropTypes from 'prop-types';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { TrackingKeys } from '~constants/tracking-api'
import styles from './operator-bonuses.module.scss';

import { getBonus } from '~helpers/getters';

const OperatorBonuses = ({ operator , modulePosition}) => {
  const onliner = getBonus('main', operator);
  const status = operator?.status;
  const isPlaceholder = status === 'coming_soon';
  const isInoperative = status === 'inactive';

  const depositText = operator?.bonus?.min_deposit && operator?.bonus?.currency ? `${operator?.bonus?.min_deposit} ${operator?.bonus?.currency}` : '';

  return (
    <div className={styles?.leftSide || ''}>
      <>
        <div className={styles?.welcomeTitle || ''}>
          <div className={styles?.bonusIcon || ''}>
            {!isInoperative && <img src="/images/bonus-icon-white.png" alt="Bonus icon" />}
          </div>
          {!isInoperative && (
            <span className={styles?.title || ''}>
              {useTranslate('welcome_bonus', 'Welcome bonus')}
            </span>
          )}
        </div>

        <div className={styles?.Bonus || ''}>
          {!isInoperative && <p className="casino-bonus">{onliner?.one_liner}</p>}
        </div>
      </>
      <div className={styles?.welcomeDescription || ''}>
        <p className={styles?.textLeft || ''}>
          {useTranslate('minimum_deposit', 'Minimum deposit')} <br />
          {useTranslate('turnover_requirements', 'Turnover requirements')}
        </p>
        <p className={styles?.textRight || ''}>
          {depositText}
          <br />
          {operator.deposit_wagering ? operator.deposit_wagering : ''}
        </p>
      </div>
      <div className={styles?.buttonSummary || ''}>
        {isInoperative && (
          <p className={styles?.textRight || ''}>{useTranslate('expired', 'Expired')}</p>
        )}
        {isPlaceholder && (
          <p className={styles?.textRight || ''}>{useTranslate('comming_soon', 'Comming Soon')}</p>
        )}
        {!isPlaceholder && !isInoperative && (
          <OperatorCta
            translationsObj={{
              active: { translationKey: 'btn_bonus', defaultValue: 'Get your bonus now' },
              not_recommended: {
                translationKey: 'not_recommended',
                defaultValue: 'Not Recommended',
              },
              coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
              inactive: {
                translationKey: 'inactive',
                defaultValue: 'Not Accepting New Players',
              },
              blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
            }}
            operator={operator}
            tracker="main"
            moduleName={TrackingKeys?.WELCOMEBONUS}
            modulePosition={modulePosition}
          />
        )}
      </div>
    </div>
  );
};

OperatorBonuses.propTypes = {
  page: PropTypes.shape({
    translations: PropTypes.string,
  }),
};

export default OperatorBonuses;
