/* eslint-disable camelcase */
/* eslint-disable react/prop-types */
/* eslint-disable no-nested-ternary */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import OperatorCta from '~atoms/button/operator-cta';
import { isMobileDevice } from '~helpers/device-detect';
import LazyImage from '~hooks/lazy-image';
import PrettyLink from '~atoms/pretty-link';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import { TrackingKeys } from '~constants/tracking-api';
import styles from './oeprator-exlusive.module.scss';

const Banner = ({ bonus = {}, template, closeButtonIcon = true, width = 48, height = 48 }) => {
  const { value, module_title } = bonus;

  const splitBy = module_title?.includes('OR') ? 'OR' : module_title?.includes('+') ? '+' : '&';

  const [firstLine, secondLine] = module_title
    ? module_title.split(splitBy)
    : bonus?.value?.bonuses?.main?.one_liner?.split('+') || [];

  const imageObject = value?.logo;
  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 || ''}>
              {useTranslate('exclusive_offer', 'EXCLUSIVE OFFER')}
            </div>
            <div className={styles?.logo || ''}>
              <PrettyLink
                moduleName={TrackingKeys?.NAVIGATIONEXLUSIVE}
                operator={bonus.value}
                tracker="banner"
                gtmClass="banner-operator-cta-gtm"
                pageTemplate={template}
                clickedElement="operator_logo"
                className="banner-gtm logo-cta"
              >
                <LazyImage
                  alt={getAltText(imageObject, value.name)}
                  src={imagePrettyUrl(
                    imageObject?.filename || imageObject?.logo_url,
                    width,
                    height
                  )}
                  width={width}
                  height={height}
                  loading="eager"
                />
              </PrettyLink>
            </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}
                  moduleName={TrackingKeys?.NAVIGATIONEXLUSIVE}
                  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,
    }),
  }),
};
