/* eslint-disable no-unused-expressions */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from '~context/MainProvider';
import { prettyTracker, translate } from '~helpers/getters';
import { setCookie } from '~helpers/cookies';
import { getTrackingAPIParams } from '~helpers/tracker';

import styles from './button.module.scss';

const OperatorCtaButton = ({
  operator,
  pageTemplate = null,
  gtmClass = '',
  buttonType = 'primary',
  buttonSize = '',
  module = null,
  tracker = 'main',
  icon = null,
  translationsObj = {
    active: { translationKey: 'play_now', defaultValue: 'Visit' },
    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' },
  },
}) => {
  const { translations } = useContext(Context) || {};
  const status = operator?.status || '';
  const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
  const url = typeof window !== 'undefined' ? window.location.href : '';
  const referer = typeof document !== 'undefined' && document?.referrer ? document.referrer : '';
  const prettyLink = `${prettyTracker(operator, trackerType, false, pageTemplate)}`;

  const onCTAClick = () => {
    process.env.IS_TRACKING_SSR &&
      setCookie(
        'affObject',
        JSON.stringify(getTrackingAPIParams(pageTemplate, module, tracker, 'cta', url, referer))
      );
  };

  const translateBtn =
    status && translationsObj[status]
      ? translate(
          translations,
          translationsObj[status]?.translationKey,
          translationsObj[status]?.defaultValue || ''
        )
      : '';

  const classes = `${styles[buttonType] || ''} ${status && styles[status] ? styles[status] : ''} ${
    buttonSize ? styles[`${buttonSize}_size`] : ''
  } `;

  return status === 'active' ? (
    <a
      href={prettyLink || '#'}
      title={typeof translateBtn === 'string' ? translateBtn : ''}
      aria-label={typeof translateBtn === 'string' ? translateBtn : ''}
      className={`${classes} ${gtmClass}`}
      target="_blank"
      rel="nofollow noreferrer sponsored"
      onClick={onCTAClick}
    >
      {translateBtn}
      {icon && icon}
    </a>
  ) : (
    <div
      title={typeof translateBtn === 'string' ? translateBtn : ''}
      aria-label={typeof translateBtn === 'string' ? translateBtn : ''}
      className={`${classes || ''} ${gtmClass || ''}`}
    >
      {translateBtn}
      {icon && icon}
    </div>
  );
};

OperatorCtaButton.propTypes = {
  operator: PropTypes.shape({
    name: PropTypes.string,
    status: PropTypes.string,
  }),
  gtmClass: PropTypes.string,
  pageTemplate: PropTypes.string,
  buttonSize: PropTypes.string,
  buttonType: PropTypes.string,
  tracker: PropTypes.string,
  module: PropTypes.string,
  translationsObj: PropTypes.shape({
    active: PropTypes.shape({
      translationKey: PropTypes.string,
      defaultValue: PropTypes.string,
    }),
    not_recommended: PropTypes.shape({
      translationKey: PropTypes.string,
      defaultValue: PropTypes.string,
    }),
    coming_soon: PropTypes.shape({
      translationKey: PropTypes.string,
      defaultValue: PropTypes.string,
    }),
    inactive: PropTypes.shape({
      translationKey: PropTypes.string,
      defaultValue: PropTypes.string,
    }),
  }),
  icon: PropTypes.node,
};

export default OperatorCtaButton;
