/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable eqeqeq */
/* eslint-disable react/prop-types */
/* eslint-disable camelcase */
import React, { useContext } from 'react';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import PropTypes from 'prop-types';
import styles from './operator-bonuses.module.scss';

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

const OperatorBonuses = ({ page, operator }) => {
  const onliner = getBonus('main', operator);
  const { min_deposit, currency } = operator?.bonus;
  const { deposit_wagering } = operator;
  const status = operator?.status;
  const isPlaceholder = status === 'coming_soon' || page.extra_fields.operator_is_placeholder == 1;
  const isInoperative = status === 'inactive' || page.extra_fields.operator_is_inoperative == 1;
  const { translations } = useContext(Context) || {};

  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 || ''}>
              {translate(translations, '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 || ''}>
          {translate(translations, 'minimum_deposit', 'Minimum deposit')} <br />
          {translate(translations, 'turnover_requirements', 'Turnover requirements')}
        </p>
        <p className={styles?.textRight || ''}>
          {min_deposit} {currency}
          <br />
          {deposit_wagering}
        </p>
      </div>
      <div className={styles?.buttonSummary || ''}>
        {isInoperative && (
          <p className={styles?.textRight || ''}>{translate(translations, 'expired', 'Expired')}</p>
        )}
        {isPlaceholder && (
          <p className={styles?.textRight || ''}>
            {translate(translations, '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"
          />
        )}
      </div>
    </div>
  );
};

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

export default OperatorBonuses;
