/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
/* eslint-disable no-nested-ternary */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Link from 'gatsby-core-theme/src/hooks/link';
import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
import { isMobileDevice } from 'gatsby-core-theme/src/helpers/device-detect';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { imagePrettyUrl, translate, getAltText } from '~helpers/getters';
import styles from './oeprator-exlusive.module.scss';

const Banner = ({ bonus, template, closeButtonIcon = true }) => {
  const { value, module_title } = bonus;
  const [, reviewPath] = value.review_link.split('.co.za/');
  const splitBy = module_title?.includes('OR') ? 'OR' : module_title?.includes('+') ? '+' : '&';
  const [firstLine, secondLine] = module_title
    ? module_title.split(splitBy)
    : bonus?.value?.one_liners?.main?.one_liner.split('+');
  const { translations } = useContext(Context) || {};
  const imageObject = value?.standardised_logo_url_object || value?.logo_url_object;
  const tracker = isMobileDevice() ? 'mobbanner' : 'banner';
  const [closed, setClosed] = useState(false);

  return (
    <div>
      {!closed && (
        <div className={`${styles?.wrapper || ''}`}>
          <div className={styles?.content || ''}>
            {closeButtonIcon && (
              <button
                className={closed ? `${styles.closed || ''}` : `${styles.closeButton || ''}`}
                type="button"
                onClick={() => setClosed(true)}
              >
                ✕
              </button>
            )}
            <div className={styles?.offer || ''}>
              {translate(translations, 'exclusive_offer', 'EXCLUSIVE OFFER')}
            </div>
            <div className={styles?.logo || ''}>
              <Link to={reviewPath} title={bonus.name} className="banner-gtm bonus-cta logo-cta">
                <LazyImage
                  alt={getAltText(imageObject, value.name)}
                  src={imagePrettyUrl(imageObject?.filename || imageObject?.logo_url, 48, 48)}
                  width={48}
                  height={48}
                  loading="eager"
                />
              </Link>
            </div>
            <div className={styles?.info || ''}>
              <p>
                {bonus.value.name}: Get <span>{firstLine}</span>
                {secondLine && splitBy + secondLine}
              </p>
              <div className={styles?.button || ''}>
                <OperatorCta
                  operator={bonus.value}
                  module="exclusive_operator"
                  translationsObj={{
                    active: { translationKey: 'play_now', defaultValue: 'Play 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' },
                  }}
                  tracker={tracker}
                  gtmClass="banner-operator-cta-gtm"
                  pageTemplate={template}
                />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Banner;

Banner.propTypes = {
  bonus: PropTypes.shape({
    name: PropTypes.string,
    value: PropTypes.shape({
      logo_url: PropTypes.string,
      short_name: PropTypes.string,
      name: PropTypes.string,
      one_liners: PropTypes.shape({
        main: PropTypes.shape({
          one_liner: PropTypes.string,
        }),
      }),
    }),
  }),
};
